working on it ...

Filters

snippets
5
followers
20
Published by SamHall

Css Patterns

I recently discovered these snippets and was amazed, I wish I could give tribute to the author right away but I am still trying to find the link from which I downloaded them. I will return with the Author info soon. Please be assured that these patterns had the free for all commercial, and non-commercial use
Sort by

Found 5 snippets

    public by lbottaro  2736  4  6  4

    Using mixin in LESS with inheritance to reuse common style

    This simple LESS file shows how to use mixin. Mixin are used to group some CSS instructions in handy, reusable classes. You can embed all the properties of a class into another class by simply including the class name as one of its properties. Since the structure of the css classes is similar, I specify the mixin with also references to the i
    .contentRegion {
      margin: 5px;
      &-Side {
        @leftWidth: 500px;
        @leftMargin: 15px;
        @leftTotalWidth : @leftWidth + @leftMargin;
    
        &-left {
          float: left;
          width: @leftWidth;
          margin-right: @leftMargin;
          vertical-align: top;	        
        
          .mixinProperty()
          {
          	&-label{float: left;}
          	&-control{display: inline-block;}
          }
        
          &-one {  
            .mixinProperty;  
          }
        
          &-two {  
            .mixinProperty;  
          }
        
          &-three {  
            .mixinProperty;  
          }
        }
      }
    }
    
    <div class="contentRegion">
      <div class="contentRegion-Side-left">
          <div class="contentRegion-Side-left-one">
            <div class="contentRegion-Side-left-one-label">One</div>
            <div class="contentRegion-Side-left-one-control">123</div>
          </div>
          <div class="contentRegion-Side-left-two">
            <div class="contentRegion-Side-left-two-label">Two</div>
            <div class="contentRegion-Side-left-two-control">321</div>
          </div>
          <div class="contentRegion-Side-left-three">
            <div class="contentRegion-Side-left-three-label">Three</div>
            <div class="contentRegion-Side-left-three-control">345</div>
          </div>
      </div>
    </div>

    public by lbottaro  4416  10  8  3

    CSS media query for responsive web site

    Using @media you can specify which style to be applied to the page, depending on certain conditions. In this example I check the actual screen resolution, applying different styles when screen width is below a max value. This comes in hand for responsive web site (mobile or desktop applications)
    <style>
    .left{ 	
    	width: 50%; 
    	float: left
    }
    .right{ 
    	width: 50%; 
    	float: left 
    }
    
    @media (max-width: 320px){
        .left{ 
    		width: 100%; 
    		color: red; 
    	}
    	.right{ 
    		width: 100%; 
    		color: yellow; 
    		border: 2px solid green;
    		border-radius: 5px;
    	}
    }
    </style>
    <div class="left">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn red.</p>
    </div>
    <div class="right">
    <p>Using @media tag I can detect when screen resolution change to a minimum value and then switch to another specific style. When the screen gets too small, it will turn yellow with a rounded border.</p>
    </div>

    public by lbottaro  352493  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 lbottaro  4174  3  6  2

    Round corner div using CSS style

    This simple html example shows how to render a div with rounded corners.
    <!DOCTYPE html>
    <html>
    <HEAD>
    <title>HTML Example</title>
    <style type="text/css">
    .roundCss 
    {
    -moz-border-radius: 15px;
    border-radius: 15px;
    border:2px solid #a1a1a1;
    padding:10px 40px; 
    background:#FAFAFA;
    width:850px;
    }
    </style>
    </HEAD>
    
    <BODY>
    <h1>My rounded corner div</h1>
    <div class="roundCss">some text here...</div>
    </BODY>
    </html>

    public by SamHall  6130  24  7  1

    Amazing - Pure CSS Background Patterns Enjoy !!

    These patterns are simply beautiful, I will give credit back to the author as soon as I find the Link, but be rest assured they do have a full royalty free use license for both commercial and non commercial use
    
    \* BURGANDY RED LEATHER W/ THE DEEP BUTTONED DOWN PILLOWED DIAMOND TUCK *\
    
    uphoulstry{
    background:
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 9%, hsla(0, 100%, 20%, 0) 9%) 0 0,
    radial-gradient(hsl(0, 100%, 27%) 4%, hsl(0, 100%, 18%) 8%, hsla(0, 100%, 20%, 0) 10%) 50px 50px,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 50px 0,
    radial-gradient(hsla(0, 100%, 30%, 0.8) 20%, hsla(0, 100%, 20%, 0)) 0 50px,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 50px 0,
    radial-gradient(hsla(0, 100%, 20%, 1) 35%, hsla(0, 100%, 20%, 0) 60%) 100px 50px,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 0 0,
    radial-gradient(hsla(0, 100%, 15%, 0.7), hsla(0, 100%, 20%, 0)) 50px 50px,
    linear-gradient(45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0,
    linear-gradient(-45deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, hsla(0, 100%, 20%, 0) 70%) 0 0;
    background-color: #300;
    background-size: 100px 100px;
    }
    
    
    \* Name says it all on this one *\
    
    starrynight {
    background-color:black;
    background-image:
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
    background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
    background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
    
    }
    
    \* dark grey with the small dotted holes in a tight pattern well done *\
    
    CarbomFiber {
    
    background:
    radial-gradient(black 15%, transparent 16%) 0 0,
    radial-gradient(black 15%, transparent 16%) 8px 8px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
    radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
    background-color:#282828;
    background-size:16px 16px;
    
    }
    
    \* Two shades of gray *\
    
    Carbon {
    background:
    linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
    linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
    linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
    linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
    linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
    linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
    background-color: #131313;
    background-size: 20px 20px;
    
     }
     
    \* clean well done notebook paper-narrow ruled *\
    
    lined Paper {  
    
    background-color: #fff;
    background-image:
    linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
    linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    }

    List Complete ( 5 snippets total )

    • Public Snippets
    • Channels Snippets