working on it ...

Filters

Explore Public Snippets

Sort by

Found 20k snippets matching: css

    public by lbottaro  429392  12  7  3

    HTML header - footer layout using CSS and DIV

    This code renders a HTML basic layout with header, main and footer contents. The main content has 2 columns and the right one contains two rows. Source: http://stackoverflow.com/questions/6778808
    <html>
        <head>
        <style type="text/css">
        #maincontent {
            width:950px;
            height:100%;
            margin:0 auto;
        }
        #header {
            width:946px;
            height:150px;
            border:#000 solid;
            border-width:2px 2px 1px 2px;
        }
        #leftcolumn {
            width:395px;
            height:703px;
            border:#000 solid;
            border-width:1px 1px 1px 2px;
            float:left;
        }
        #toprow {
            width:549px;
            height:351px;
            border:#000 solid;
            border-width:1px 2px 1px 1px;
            float:left;
        }
        #bottomrow {
            width:549px;
            height:350px;
            border:#000 solid;
            border-width:1px 2px 1px 1px;
            float:left;
        }
        #footer {
            width:946px;
            height:150px;
            border:#000 solid;
            border-width:1px 2px 2px 2px;
            clear:both;
        }
        </style>
        <body>
        <div id="maincontent">
            <div id="header">Header Content</div>
            <div id="leftcolumn">Leftcolumn Content</div>
            <div id="toprow">Toprow Content</div>
            <div id="bottomrow">Bottomrow Content</div>
            <div id="footer">Footer Content</div>
        </div>
        </body>
        </html>

    public by cm85  423196  12  6  1

    Living The Herbal Life

    Living The Herbal Life. Your World Revolves Around....
    <html>
    		<head>
    				<style>
    						
    						body {
    		/* The universe is black */
    		background-color: black;
    		width: 100%;
    		height: 100%;
    }
    
    #sun {
    		/* Style your sun */
    		position: absolute;
    		top: 50%;
    		left: 50%;
    
    		height: 100px;
    		width: 100px;
    		margin-top: -50px; 
    		margin-left: -50px;
    
    		border-color: #dddd00;
    		border-width: 8px;
    		border-style: solid;
    		border-radius: 50%;
    
    		box-shadow: 0 0 128px orangered;
    }
    
    #earth {
    		position: absolute;
    		top: 0;
    		left: 50%;
    
    		height: 50px;
    		width: 50px;
    		margin-left: -25px;
    		margin-top: -25px;
    }
    
    #earth-orbit {
    		position: absolute;
    		top: 50%;
    		left: 50%;
    
    		width: 300px;
    		height: 300px;
    		margin-top: -150px;
    		margin-left: -150px;
    		
    		-webkit-animation: spin-right 10s linear infinite;
    		-moz-animation: spin-right 10s linear infinite;
    		animation: spin-right 10s linear infinite;
    }
    
    @-webkit-keyframes spin-right {
    	100% {
    			-webkit-transform: rotate(360deg);
    	}
    }
    
    @-moz-keyframes spin-right {
    		100% {
    				-webkit-transform: rotate(360deg);
    		}
    }
    				</style>
    		</head>
    		
    		<body>
    		
    				<!-- Right below is an image of the sun -->
    				<img id='sun' src="https://dl.dropboxusercontent.com/u/200015521/Image%20URL%20Links/Marijuana-Leaf.png">
    				
    				<!-- Insert the 'earth' on the next line -->
    				<div id='earth-orbit'>
    						<img id='earth' src="https://dl.dropboxusercontent.com/u/200015521/Pictures/Carlo.png">
    				</div>
    				
    		</body>
    		</html>
    
                                                    

    public by lbottaro  352475  5  7  7

    Css zebra color for alternate style in table rows

    This simple code shows how to alternate the style of each row in a table. tr:nth-child(even) or tr:nth-child(odd) operators help in switching style automatically for each row item in a table.
    <html>
    	<head>
    		<title>
             Example of zebra color
    		</title>
    		<style>	
    
    		tr:nth-child(even) {
      background-color: red;
    }
    
    
    tr:nth-child(odd) {
      background-color: white;
    }
    		</style>
            
    	</head>
    	<body>
    
    		<table id="myTable">
    			<th>Lorem ipsum dolor.</th>
    			<th>Nam, sequi, architecto?</th>
    			<th>Aut, eius, esse!</th>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Doloribus, quidem, excepturi.</td>
    				<td>Magnam, dolorum, alias!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Odio, fuga, distinctio.</td>
    				<td>Cumque, necessitatibus, labore!</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Esse, suscipit, soluta.</td>
    				<td>Nostrum, animi, fugit?</td>
    			</tr>
    			<tr>
    				<td>Lorem ipsum dolor.</td>
    				<td>Error, veritatis, saepe?</td>
    				<td>Alias, cupiditate, debitis.</td>
    			</tr>
    			<tr >
    				<td>Lorem ipsum dolor.</td>
    				<td>Minus, neque, quisquam.</td>
    				<td>Eius, deleniti, sunt.</td>
    			</tr>
    		</table>
    
    		
    	</body>
    </html>
    

    public by afelicioni  320554  2  4  0

    CSS blink class

    CSS blink class: file.css
    @keyframes blink {
        50% { opacity:0.0  }
    }
    @-webkit-keyframes blink {
        50% { opacity:0.0  }
    }
    @-moz-keyframes blink {
        50% { opacity:0.0  }
    }
    @-ms-keyframes blink {
        50% { opacity:0.0  }
    }
    @-o-keyframes blink {
        50% { opacity:0.0  }
    }
    .blink {
        -webkit-animation: blink 1s step-start 0s infinite;
        -moz-animation: blink 1s step-start 0s infinite;
        -ms-animation: blink 1s step-start 0s infinite;
        -o-animation: blink 1s step-start 0s infinite;
        animation: blink 1s step-start 0s infinite;
    }
    
    

    public by JonahM  298454  2  6  4

    Responsive Type

    No Javascript required for responsive text! Pure CSS3
    /* Code Reference & Examples: http://mole.tk/1ymmXAv */
    
    
    /* 
    
    What Does vw and vm mean? 
        1vw = 1% of viewport width 
        1vh = 1% of viewport height 
        1vmin = 1vw or 1vh, whichever is smaller 
        1vmax = 1vw or 1vh, whichever is larger
    */
    
    body {
    	background-color:   #ff5442;
      font-family:        ‘Lato’, Arial, sans-serif; 
      margin:             2vw;
      
    }
    
    h1 {
    	color:              #fff;
    	font-size:          6vw;
    	font-weight:        900;
    	text-transform:     uppercase;
      line-height:        .3vw;
    	}
    
    h2 {
      color:              #fff;
      font-size:          4vw;
    }
    
    p {
      color:              #fff;
      font-size:          1em;
    }

    public by pan  312662  0  7  4

    CSS Regex Selector Extension For jQuery

    Using this extension enables regular expresions css selectors in jQuery
    /**
     * CSS Regex Selector Extension For jQuery
     * 
     */
    jQuery.expr[':'].regex = function(elem, index, match) {
       var matchParams = match[3].split(','),
           validLabels = /^(data|css):/,
           attr = {
               method: matchParams[0].match(validLabels) ?
                   matchParams[0].split(':')[0] : 'attr',
               property: matchParams.shift().replace(validLabels,'')
           },
           regexFlags = 'ig',
           regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
       return regex.test(jQuery(elem)[attr.method](attr.property));
    }

    public by f8lrebel  366079  3  4  0

    Original project here: http://designitcodeit.com/i/11

    Original project here: http://designitcodeit.com/i/11: index.html script.js style.css
    CSS
    <ul class="comments">
      <li class="comment">
        <a href="#" title="View this user profile" class="photo"><img src="http://designitcodeit.com/live/45S6P0fit0nM/img/photo1.png" alt="Kasper"></a>
        <div class="meta">Kasper | 2012.07.24 14:58 <a class="reply">Reply</a></div>
        <div class="body">Cupcake ipsum dolor sit amet. Icing donut cheesecake muffin marzipan chocolate biscuit. Sweet roll chocolate marzipan.</div>
      </li>
      <li class="comment level-2">
        <a href="#" title="View this user profile" class="photo"><img src="http://designitcodeit.com/live/45S6P0fit0nM/img/photo-default.png" alt="Photo"></a>
        <div class="meta">John | 2012.07.24 15:21 <a class="reply">Reply</a></div>
        <div class="body">Candy soufflé bear claw apple pie bear claw marshmallow. Jelly brownie wafer chocolate jelly.marzipan pastry sesame snaps apple pie.</div>
      </li>
      <li class="comment level-3">
        <a href="#" title="View this user profile" class="photo"><img src="http://designitcodeit.com/live/45S6P0fit0nM/img/photo-default.png" alt="Photo"></a>
        <div class="meta">Jane | 2012.07.24 15:32 <a class="reply">Reply</a></div>
        <div class="body">Tart apple pie bonbon applicake sesame snaps sugar plum.</div>
      </li>
      <li class="comment level-4">
        <a href="#" title="View this user profile" class="photo"><img src="http://designitcodeit.com/live/45S6P0fit0nM/img/photo-default.png" alt="Photo"></a>
        <div class="meta">Jane | 2012.07.24 15:32 <a class="reply">Reply</a></div>
        <div class="body">Tart apple pie bonbon applicake sesame snaps sugar plum.</div>
      </li>
      <li class="comment">
        <a href="#" title="View this user profile" class="photo"><img src="http://designitcodeit.com/live/45S6P0fit0nM/img/photo1.png" alt="Kasper"></a>
        <div class="meta">Kasper | 2012.07.24 14:58 <a class="reply">Reply</a></div>
        <div class="body">Cupcake ipsum dolor sit amet. Icing donut cheesecake muffin marzipan chocolate biscuit.</div>
      </li>
    </ul>
    
    /* 
     * Comments thread for Design it & Code it
     * http://designitcodeit.com/i/11
     */
    
    html {
      background: #fff url(http://designitcodeit.com/live/45S6P0fit0nM/img/bg.png);
      font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
    }
    body {
      max-width: 480px;
      width: 100%;
      margin: 30px auto 0 auto;
    }
    a { cursor: pointer; }
    
    /**
     * Customs
     */
    .comments:after { border-color: #fff; }
    .comments:before { background-color: #fff; }
    .comments .comment {
      background: #fff;
      border-radius: 10px;
      font-size: 11px;
      padding: 10px 15px;
    }
    .comments [class*="level-"] .photo:before { background-color: #fff; }
    .comments .meta { color: #ccc; }
    .comments .meta a { color: inherit; }
    .comments .meta a:hover { color: #34b5d0; }
    .comments .body { color: #888; }
    
    /**
     * Comments Thread
     */
    .comments {
      list-style-type: none;
      padding: 5px 0 0 46px;
      position: relative;
      margin: 0 0 0 12px;
    }
    .comments:before,
    .comments .comment,
    .comments .comment:after,
    .comments .comment:before,
    .comments .photo img,
    .comments [class*="level-"] .photo:before {
      box-shadow: 0 1px 3px rgba(0,0,0,.4);
    }
    .comments:after,
    .comments:before {
      display: block;
      content: '';
      position: absolute;
    }
    .comments:before {
      border-radius: 0 0 5px 5px;
      height: 100%;
      width: 8px;
      left: 0;
      top: 0;
    }
    .comments:after {
      box-shadow: 0 1px 3px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.4) inset;
      border-width: 4px;
      border-style: solid;
      border-radius: 18px;
      height: 10px;
      width: 10px;
      left: -5px;
      top: -16px;
      z-index: -1;
    }
    .comments .comment {
      margin-bottom: 10px;
      position: relative;
    }
    .comments .comment:after,
    .comments .comment:before {
      border-radius: 10px;
      background-color: #fff;
      position: absolute;
      display: block;
      content: '';
    }
    .comments .comment:after {
      width: 12px;
      height: 12px;
      left: -14px;
      top: 7px;
    }
    .comments .comment:before {
      width: 5px;
      height: 5px;
      left: -22px;
      top: 16px;
    }
    .comments .photo {
      position: absolute;
      left: -60px;
      top: 2px;
    }
    .comments .photo img {
      border: 1px solid #fff;
      border-radius: 32px;
      overflow: hidden;
    }
    .comments .meta { margin-bottom: 5px; }
    .comments .meta .reply { display: none; float: right; }
    .comments .comment:hover .reply { display: block; }
    .comments [class*="level-"] .photo:before {
      display: block;
      content: '';
      position: absolute;
      margin-top: -2px;
      height: 4px;
      width: 20px;
      left: -10px;
      top: 50%;
      z-index: -1;
    }
    .comments .level-2 { margin-left: 30px; }
    .comments .level-3 { margin-left: 50px; }
    .comments .level-4 { margin-left: 70px; }
    .comments .level-5 { margin-left: 90px; }
    .comments .level-6 { margin-left: 110px; }
    .comments .level-3 .photo:before { width: 40px; left: -30px;}
    .comments .level-4 .photo:before { width: 60px; left: -50px;}
    .comments .level-5 .photo:before { width: 80px; left: -70px;}
    .comments .level-6 .photo:before { width: 100px; left: -90px;}
    
    

    public by JonahM  275569  4  7  4

    Fluid CSS Rows

    I've realised in my coding experience that I need to To allow for space in the div or row tags when using text. Because everything is responsive on a web page, it's a good idea to use these classes. They work really well. Example: http://j.mp/1oilINn
    
    
    .strip-md{
    	padding-top:80px;
    	padding-bottom:80px;
    	position:relative;
    	overflow:hidden;
    }
    
    .strip-sm{
    	padding-top:30px;
    	padding-bottom:30px;
    }
    
    

    public by JKCPR  257437  1  6  1

    font: CSS SHORTHAND

    Useful CSS shorthand notation of font: attribute of universal selector of all element(s) descended from the element.
    /* CSS SHORTHAND font: */
    
    body *{
          font: normal 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    
    /* Equivalent Example
    
    body *{
          font-weight: normal;
          font-size: 1em;
          line-height: 1.5;
          font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
          
      */

    public by J4B  245716  2  4  0

    CSS libraries and guides to bring some order to the chaos.

    CSS libraries and guides to bring some order to the chaos.: css_resources.md
    ## Libraries
    - [960 Grid System](http://960.gs/) - An effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
    - [Compass](http://compass-style.org/) - Open source CSS Authoring Framework.
    - [Bootstrap](http://getbootstrap.com/) - Sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.
    - [Font Awesome](http://fortawesome.github.io/Font-Awesome/) - The iconic font designed for Bootstrap.
    - [Zurb Foundation](http://foundation.zurb.com/) - Framework for writing responsive web sites.
    - [SASS](http://sass-lang.com/) - CSS extension language which allows variables, mixins and rules nesting.
    - [Skeleton](http://www.getskeleton.com/) - Boilerplate for responsive, mobile-friendly development.
    
    ## Guides
    - [Scalable and Modular Architecture for CSS](http://smacss.com/) - Learn how to structure your CSS to allow for flexibility and maintainability as your project and your team grows.
    - [CSS Property Index](http://www.blooberry.com/indexdot/css/propindex/all.htm) - All properties in an easy-to-digest form.
    
    
    • Public Snippets
    • Channels Snippets