Snippet CSS
With snippet CSS, you can free your mind
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>
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 */ p#articles p:first-child { border:1px solid #c1c13a; } p#articles p:last-child { border:1px solid #3ac13a; } /* or */ p#articles > :first-child { text-align:left; } p#articles > :last-child { text-align:right; } </style>
<p 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> </p>
CSS Box Shadow:
Use this snippet to add shadows to tables, ps 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>
<p class="shadow"> This is a Box-shadowed element. </p> <p class="shadowIE"> <p class="content"> This is a Box-shadowed element. </p> </p>
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>
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>
<p class="grad">This is a p with gradient background.</p>
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.</td></tr> <tr> <td>Row2</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr> <td>Row3</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr> <td>Row4</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr> <td>Row5</td> <td>Lorem ipsum dolor sit amet.</td></tr> </tbody> </table> <table> <tbody> <tr class="odd"> <td>Row1</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr> <td>Row2</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr class="odd"> <td>Row3</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr> <td>Row4</td> <td>Lorem ipsum dolor sit amet.</td></tr> <tr class="odd"> <td>Row5</td> <td>Lorem ipsum dolor sit amet.</td></tr> </tbody> </table>
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, p, span, applet, object, iframe, h1, h2, h2, h4, h5, h2, 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>
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>
<p class="wrapper"> <p class="container"> <p>Content goes here</p> </p> </p>
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>
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>
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>
Comments
Post a Comment