Saturday 22 November 2014

11 CSS Code Snippets For Web Developers To Use!

For a developer, code snippets can often be a godsend. While programming languages apply to developers, for web developers, CSS and HTML are more important. That said, here are 10 code snippets in CSS that web developers will find extremely handy!

CSS, code snippets, learn CSS, best CSS snippets, CSS code snippets, CSS tutorial, top CSS code snippets




1. Adding Rounded Corners: Rounded corners can be added to your CSS3-based elements, like borders and buttons.



<style type="text/css">

.round1 {

border:1px solid #c1c13a;

-moz-border-radius: 10px;

-webkit-border-radius: 10px;

border-radius: 10px; /* future proofing */

-khtml-border-radius: 10px; /* for old Konqueror browsers */

}

.round2 {

border:1px solid #c1c13a;

-moz-border-radius: 10px 10px 0 0;

-webkit-border-radius: 10px 10px 0 0;

border-radius: 10px 10px 0 0; /* future proofing */

-khtml-border-radius: 10px 10px 0 0; /* for old Konqueror browsers */

}

</style>



2. Change Styles of First/Last Elements: This is used to change the styles of the first and/or last elements of a container in CSS.



<style type="text/css">

p.first { margin-top: 0 !important; margin-left: 0 !important; }

p.last { margin-bottom: 0 !important; margin-right: 0 !important; }

/* or */

div#articles p:first-child { border:1px solid #c1c13a; }

div#articles p:last-child { border:1px solid #3ac13a; }

/* or */

div#articles > :first-child { text-align:left; }

div#articles > :last-child { text-align:right; }

</style>



<div id="articles">

<p class="first">1st article: lorem ipsum dolor sit amet...</p>

<p>2st article: lorem ipsum dolor sit amet...</p>

<p>3st article: lorem ipsum dolor sit amet...</p>

<p>4st article: lorem ipsum dolor sit amet...</p>

<p class="last">5st article: lorem ipsum dolor sit amet...</p>

</div>



3. CSS Box Shadow: Use this snippet to add shadows to tables, divs etc.



<style type="text/css">

.shadow {

-moz-box-shadow: 4px 5px 5px 1px #777;

-webkit-box-shadow: 4px 5px 5px 1px #777;

box-shadow: 4px 5px 5px 1px #777;

}



.shadowIE {

background-color:#f5f5f5; /* need for IE*/

-moz-box-shadow: 4px 5px 5px 1px #777;

-webkit-box-shadow: 4px 5px 5px 1px #777;

box-shadow: 4px 5px 5px 1px #777;

filter: progid:DXImageTransform.Microsoft.Blur

(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30);

-ms-filter: "progid:DXImageTransform.Microsoft.Blur

(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)";

zoom: 1;

}

.shadowIE .content {

position:relative;

background-color:#f5f5f5;

}

</style>



<div class="shadow">

This is a Box-shadowed element.

</div>



<div class="shadowIE">

<div class="content">

This is a Box-shadowed element.

</div>

</div>



4. Targeting Firefox With CSS: This snippet applies only to the Firefox extension for CSS.



<style type="text/css">

@-moz-document url-prefix(){

H5 { color:red; }

P { margin-left:20px; }

/* other special styles for FireFox here */

}

</style>



5. Background Gradient: With CSS3, you don't need to add images to the background of elements. You can directly add gradients.



<style>

.grad{

background: -webkit-gradient(linear, left top, left bottom, from(#84c8d7), to(#327fbd));

background: -moz-linear-gradient(top, #84c8d7, #327fbd);

filter:

progid:DXImageTransform.Microsoft.gradient(startColorstr="#84c8d7", endColorstr="#327fbd");

}

</style>



<div class="grad">This is a DIV with gradient background.</div>



6. Alternating Table Color Rows: This is pretty self explanatory. If you have a table, you can use this to give it alternating row colours.



<style type="text/css">

/* technique 1 */

tbody tr:nth-child(odd){ background-color:#ccc; }

/* technique 2 */

TBODY TR.odd { background-color:#78a5d1; }

</style>



<table>

<tbody>

<tr><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

</tbody>

</table>



<table>

<tbody>

<tr class="odd"><td>Row1</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row2</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr class="odd"><td>Row3</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr><td>Row4</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

<tr class="odd"><td>Row5</td><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td></tr>

</tbody>

</table>





7. Reset Browser Default Styles: The same code can display different styles for different browsers. This is how to avoid the same.



<style type="text/css">

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code

, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video

{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline; outline:none; }

html

{ height:101%; } /* always show scrollbars */

body

{ font-size:62.5%; line-height:1; font-family:Arial, Tahoma, Verdana, sans-serif; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

{ display:block; }

img

{ border:0; max-width:100%; }

a

{ text-decoration:none; }

a:hover

{ text-decoration:underline; }

ol, ul

{ list-style:none; }

blockquote, q

{ quotes:none; }

blockquote:before, blockquote:after, q:before, q:after

{ content:""; content:none; }

strong

{ font-weight:bold; }

input

{ outline:none; }

table

{ border-collapse:collapse; border-spacing:0; }

</style>



8. Center Website Content: Every one of your users will have different displays. So, you need to center your website's content so as to fit every display properly.



<style type="text/css">

/* Center your website horizontally */

.wrapper{

width:960px;

display:table;

margin:auto;

}



/* Center certain content vertically */

.container{

min-height: 10em;

display: table-cell;

vertical-align: middle;

}

</style>



<div class="wrapper">

<div class="container">

<p>Content goes here</p>

</div>

</div>



9. Removing Arrows From <SELECT> Tag: In HTML, Select comes with drop down arrows. These can be removed using CSS.



<style type="text/css">

SELECT.no_arrows {

width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;

background:transparent; -webkit-appearance:none;

text-indent:0.01px; text-overflow:""; color:#444;

}

SELECT.no_arrows:focus {

box-shadow:none;

}

SELECT.no_arrows::-ms-expand{

/* for IE 10+ */

display:none;

}

@-moz-document url-prefix(){

/* for FF */

SELECT.no_arrows {

width:auto; padding-top:2px; margin:0 0 0 5px;

-webkit-appearance: none; -moz-appearance: none;

}

}

</style>



10. Animated Tooltip with CSS new: This snippet uses the transform feature from CSS3 to create custom tool tips in pure CSS.



<style type="text/css">

.tooltip-container {

/* Forces tooltip to be relative to the element, not the page */

position:relative;

cursor:help;

}



.tooltip {

display:block;

position:absolute;

width:150px;

padding:5px 15px;

left:50%;

bottom:25px;

margin-left:-95px;

/* Tooltip Style */

color:#fff;

border:2px solid rgba(34,34,34,0.9);

background:rgba(51,51,51,0.9);

text-align:center;

border-radius:3px;

/* Tooltip Style */

opacity:0;

box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-0-transition:all 0.2s ease-in-out;

-ms-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

-webkit-transform:scale(0);

-moz-transform:scale(0);

-o-transform:scale(0);

-ms-transform:scale(0);

transform:scale(0);

/* Reset tooltip, to not use container styling */

font-size:14px;

font-weight:normal;

font-style:normal;

}



.tooltip:before, .tooltip:after{

content:"";

position:absolute;

bottom:-13px;

left:50%;

margin-left:-9px;

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid rgba(0,0,0,0.1);

}

.tooltip:after{

bottom:-12px;

margin-left:-10px;

border-top:10px solid rgba(34,34,34,0.9);

}



.tooltip-container:hover .tooltip, a:hover .tooltip {

/* Makes the Tooltip slightly transparent, Lets the barely see though it */

opacity:0.9;

/* Changes the scale from 0 to 1 - This is what animtes our tooltip! */

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1);

}



/* Custom Classes */

.tooltip-style1 {

color:#000;

border:2px solid #fff;

background:rgba(246,246,246,0.9);

font-style:italic;

}

.tooltip-style1:after{

border-top:10px solid #fff;

}

</style>



<i class="tooltip-container"><b>Lorem ipsum dolor sit amet</b><span class="tooltip">Hello! This is a first tooltip!</span></i>



<em class="tooltip-container"><b>Pellentesque id auctor sem</b><span class="tooltip tooltip-style1">This is a second tooltip!</span></em>



11. Prevent Long URLs From Breaking Out new: Long URLs often break out from the container, causing issues to users. This is how to avoid them from doing so.



<style type="text/css">

.break {

-ms-word-break: break-all;

word-break: break-all;

word-break: break-word;

-webkit-hyphens: auto;

-moz-hyphens: auto;

hyphens: auto;

}



.ellipsis {

width: 250px;

white-space: nowrap;

overflow: hidden;

-ms-text-overflow: ellipsis; /* Required for IE8 */

-o-text-overflow: ellipsis; /* Required for Opera */

text-overflow: ellipsis;

}

</style>

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...