10 Popular Code Snippets for Developers Week #1
Every week we find cool little code snippets from around the web, Â in this first edition of 10 Popular Code Snippets for Developers Week #1, we’ll be focusing on CSS3 Snippets. For developers there’s nothing more enjoyable than learning a new snippet of style code, they can help make our work lives easier and explore new and exciting possibilities.
CSS3 is one of the most important elements to master when it comes to web design, with the amount of capabilities to learn in CSS3, most of us continue to learn as we go. Forget the beginners stuff, today we’ll be focusing on CSS3 Snippets for Developers Week #1.
Below is a collection of 10 Popular CSS3 Snippets for Developers Week #1. To keep up to date with all the cool links, simply follow us  @BloomWebDesign, Facebook and Subscribe via RSS.
1. Targeting Chrome With CSS
<style type="text/css">
@media screen and (-webkit-min-device-pixel-ratio:0) {
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for Chrome here */
}
</style>
2. Image Set color Black and White
#image{
filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
3. CSS Cube using Transforms
<!doctype html>
<html>
<head>
<style>
/*
Cube Experiment
Date: 26th March 2009
Author: Paul Hayes
*/
body{
font-family:Helvetica;
}
.cube {
position: absolute;
left: 50%;
top: 300px;
margin-left: -200px;
}
.cube p {
line-height: 14px;
font-size: 12px;
}
.cube h2 {
font-weight: bold;
}
.rightFace,
.leftFace,
.topFace div {
padding: 10px;
width: 180px;
height: 180px;
}
.rightFace,
.leftFace,
.topFace {
position: absolute;
}
.leftFace {
-webkit-transform: skew(0deg, 30deg);
-moz-transform: skew(0deg, 30deg);
background-color: #ccc;
}
.rightFace {
-webkit-transform: skew(0deg, -30deg);
-moz-transform: skew(0deg, -30deg);
background-color: #ddd;
left: 200px;
}
.topFace div {
-webkit-transform: skew(0deg, -30deg) scale(1, 1.16);
-moz-transform: skew(0deg, -30deg) scale(1, 1.16);
background-color: #eee;
font-size: 0.862em;
}
.topFace {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
top: -158px;
left: 100px;
}
/* Optional WebKit Animations */
/*
.rightFace {
-webkit-transition: -webkit-transform 1s linear;
}
.leftFace {
-webkit-transition: -webkit-transform 1s linear;
}
.topFace {
-webkit-transition: -webkit-transform 1s linear;
}
.cube:hover .rightFace {
-webkit-transform: skew(0deg, -30deg) translate(100px, 100px);
}
.cube:hover .leftFace {
-webkit-transform: skew(0deg, 30deg) translate(-100px, 100px);
}
.cube:hover .topFace {
-webkit-transform: rotate(60deg) translate(-50px, -50px);
}
/* Video */
.cube video {
left: -20px;
top: -20px;
position: relative;
}
.cube div.rightFace video {
left: -301px;
top: -35px;
opacity: 0.9;
}
.cube div.leftFace video {
opacity: 0.7;
top: -35px;
left: -100px;
}
.cube div.rightFace,
.cube div.leftFace {
overflow: hidden;
}
.cube div.topFace.video div {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<div id="experiment">
<div class="cube">
<div class="topFace"><div>
<h2>Top cube face</h2>
<p>The top face is nested in an extra div tag to give correct rotation of skewed rectangle.</p>
<p>This face is also scaled, so the font size has been reduced to accommodate.</p>
</div></div>
<div class="leftFace">
<h2>Left cube face</h2>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="rightFace">
<h2>Right cube face</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</body>
</html>
4. CSS Animated Loading Circles
HTML
<div class="loader">
<span></span>
<span></span>
<span></span>
</div>
CSS
.loader {
text-align: center;
}
.loader span {
display: inline-block;
vertical-align: middle;
width: 10px;
height: 10px;
margin: 50px auto;
background: black;
border-radius: 50px;
-webkit-animation: loader 0.9s infinite alternate;
-moz-animation: loader 0.9s infinite alternate;
}
.loader span:nth-of-type(2) {
-webkit-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
}
.loader span:nth-of-type(3) {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
}
@-webkit-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-webkit-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-webkit-transform: translateY(-21px);
}
}
@-moz-keyframes loader {
0% {
width: 10px;
height: 10px;
opacity: 0.9;
-moz-transform: translateY(0);
}
100% {
width: 24px;
height: 24px;
opacity: 0.1;
-moz-transform: translateY(-21px);
}
}
5. Used to set this CSS to remove the reset : ul , li , ol , li
li ul, li ol {
margin:0 1.5em;
}
ul, ol {
margin:0 1.5em 1.5em 1.5em;
}
ul {
list-style-type:disc;
}
ol {
list-style-type:decimal;
}
ol ol {
list-style: upper-alpha;
}
ol ol ol {
list-style: lower-roman;
}
ol ol ol ol {
list-style: lower-alpha;
}
/*------------------------------------------------*/
ul {
list-style-type: disc;
list-style-position: inside;
}
ol {
list-style-type: decimal;
list-style-position: inside;
}
ul ul, ol ul {
list-style-type: circle;
list-style-position: inside;
margin-left: 15px;
}
ol ol, ul ol {
list-style-type: lower-latin;
list-style-position: inside;
margin-left: 15px;
}
6. Â Corrugated Background using Gradient
#grad7a  {
color:black;
background: linear-gradient(to bottom, dodgerblue,
white,dodgerblue, white, dodgerblue,white,
dodgerblue,white,dodgerblue,white,dodgerblue);
}
7. W3C Keyword Colors
You can choose from a huge range of colors.
var colors = ["aliceblue","antiquewhite","aqua","aquamarine","azure","beige","bisque","black","blanchedalmond","blue","blueviolet","brown","burlywood","cadetblue","chartreuse","chocolate","coral","cornflowerblue","cornsilk","crimson","cyan","darkblue","darkcyan","darkgoldenrod","darkgray","darkgreen","darkkhaki","darkmagenta","darkolivegreen","darkorange","darkorchid","darkred","darksalmon","darkseagreen","darkslateblue","darkslategray","darkturquoise","darkviolet","deeppink","deepskyblue","dimgray","dodgerblue","firebrick","floralwhite","forestgreen","fuchsia","gainsboro","ghostwhite","gold","goldenrod","gray","green","greenyellow","honeydew","hotpink","indianred","indigo","ivory","khaki","lavender","lavenderblush","lawngreen","lemonchiffon","lightblue","lightcoral","lightcyan","lightgoldenrodyellow","lightgreen","lightgrey","lightpink","lightsalmon","lightseagreen","lightskyblue","lightslategray","lightsteelblue","lightyellow","lime","limegreen","linen","magenta","maroon","mediumaquamarine","mediumblue","mediumorchid","mediumpurple","mediumseagreen","mediumslateblue","mediumspringgreen","mediumturquoise","mediumvioletred","midnightblue","mintcream","mistyrose","moccasin","navajowhite","navy","navyblue","oldlace","olive","olivedrab","orange","orangered","orchid","palegoldenrod","palegreen","paleturquoise","palevioletred","papayawhip","peachpuff","peru","pink","plum","powderblue","purple","red","rosybrown","royalblue","saddlebrown","salmon","sandybrown","seagreen","seashell","sienna","silver","skyblue","slateblue","slategray","snow","springgreen","steelblue","tan","teal","thistle","tomato","turquoise","violet","wheat","white","whitesmoke","yellow","yellowgreen"];
8. Corner ribbon title / notification / offer
/*HTML FOR CORNER RIBBON*/
Â
<div class="wrapper">
<div class="ribbon-wrapper-green"><div class="ribbon-green">NEWS</div></div>
</div>​
Â
/*CSS FOR CORNER RIBBON*/
Â
.wrapper {
margin: 50px auto;
width: 280px;
height: 370px;
background: white;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
-moz-box-shadow: Â Â Â 0px 0px 8px rgba(0,0,0,0.3);
box-shadow: Â Â Â Â Â Â Â Â 0px 0px 8px rgba(0,0,0,0.3);
position: relative;
z-index: 90;
}
.ribbon-wrapper-green {
width: 85px;
height: 88px;
overflow: hidden;
position: absolute;
top: -3px;
right: -3px;
}
.ribbon-green {
font: bold 15px Sans-Serif;
color: #333;
text-align: center;
text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
-webkit-transform: rotate(45deg);
-moz-transform: Â Â Â rotate(45deg);
-ms-transform: Â Â Â Â rotate(45deg);
-o-transform: Â Â Â Â Â rotate(45deg);
position: relative;
padding: 7px 0;
left: -5px;
top: 15px;
width: 120px;
background-color: #BFDC7A;
background-image: -webkit-gradient(linear, left top, left bottom, from(#BFDC7A), to(#8EBF45));
background-image: -webkit-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: Â Â Â -moz-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: Â Â Â Â -ms-linear-gradient(top, #BFDC7A, #8EBF45);
background-image: Â Â Â Â Â -o-linear-gradient(top, #BFDC7A, #8EBF45);
color: #6a6340;
-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
-moz-box-shadow: Â Â Â 0px 0px 3px rgba(0,0,0,0.3);
box-shadow: Â Â Â Â Â Â Â Â 0px 0px 3px rgba(0,0,0,0.3);
}
.ribbon-green:before, .ribbon-green:after {
content: "";
border-top: Â Â 3px solid #6e8900;
border-left: Â 3px solid transparent;
border-right: 3px solid transparent;
position:absolute;
bottom: -3px;
}
.ribbon-green:before {
left: 0;
}
.ribbon-green:after {
right: 0;
}
9. Format a link based on it linking to a pdf
/* Add formatting based on link type */
.entry-content a[href$=".pdf"]{
background: url(images/pdf.png) no-repeat center right;
padding:10px 33px 10px 0;
color:#FF0000;
}
Â
/* background image can be whatever you want, just make sure you adjust padding to accomodate it */
10. Print URL After Links
@media print{
a:after{content:" (" attr(href) ") ";font-size:0.8em;font-weight:normal;}
}
