Na
CSS wikidot,
Bryce Cameron opublikował
growl notification style. Jest to lekko lekko transparentna grafitowa ramka o zaokrąglonych rogach uzyskana za pomocą styli.
HTML
<![CDATA[<div class="wrapper" id="%priority%">
<div id="background">
<div id="icon">
<img alt="icon" src="growlimage://%image%" /></div>
<div id="title">
%title%</div>
<div id="text">
%text%</div>
</div>
</div>
]]>
CSS
<![CDATA[body {
color: #222;
font-family: Helvetica, sans-serif;
margin: 0;
padding: 0;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.wrapper {
float: left;
}
#background {
float: left;
border: 1px solid #222;
-webkit-border-radius: 8px;
margin: 5px;
width: 300px;
padding: 10px 10px;
background-image:
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0,rgba(255,255,255,0.18)),
color-stop(0.5,rgba(255,255,255,0.06)),
color-stop(0.5,rgba(255,255,255,0)),
color-stop(1,rgba(255,255,255,0))
),
-webkit-gradient(linear, 0 0, 0 100%,
color-stop(0,rgba(0,0,0,0.7)),
color-stop(1,rgba(0,0,0,0.9))
);
-webkit-box-shadow:
0 0 5px rgba(0,0,0,.4),
0 1px 0 rgba(255,255,255,0.2) inset,
0 -1px 0 rgba(255,255,255,0.2) inset,
1px 0 0 rgba(255,255,255,0.2) inset,
-1px 0 0 rgba(255,255,255,0.2) inset;
webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.4s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in;
}
#icon {
float: left;
width: 48px;
height: 48px;
margin-right: 15px;
}
#icon img {
width: 48px;
height: 48px;
}
#title {
font-weight:bold;
padding: 0 2px 0 0;
font-size: 15px;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.6);
letter-spacing: 0;
text-align: left;
margin-left: 50px;
}
#text {
font-weight: normal;
font-size: 14px;
color: #eaeaea;
text-shadow: 0 1px 1px rgba(0,0,0,0.6);
text-transform: none;
margin-top: 6px;
margin-left: 63px;
word-wrap: break-word;
}
@-webkit-keyframes emergency {
0% {opacity: 1;}
60% {opacity: 1;}
100% {opacity: 0;}
}
#emergency #background {
border: 1px solid red;
-webkit-animation-name: emergency;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
}
]]>
Download:
link,
mirror
Źródło:
http://css3.wikidot.com/blog:freebie-growl-notification-style
0 komentarze:
Prześlij komentarz