̳ > : HTML 5 - CSS 3 > "18 CSS3"


18 CSS3


27 2011 12:41:38


18 . CSS3, - .

1. "" (661 B)

18   CSS3
background-color: #FF7D9D;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
  0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image: 
  linear-gradient(115deg, #C90032 23px, transparent 23px),
  linear-gradient(295deg, #C90032 23px, transparent 23px),
  linear-gradient(115deg, #C90032 23px, transparent 23px),
  linear-gradient(295deg, #C90032 23px, transparent 23px),

  linear-gradient(115deg, #C90032 10px, transparent 10px),
  linear-gradient(295deg, #C90032 10px, transparent 10px),
  linear-gradient(115deg, #C90032 10px, transparent 10px),
  linear-gradient(295deg, #C90032 10px, transparent 10px);


2. (439 B)

18   CSS3
background: 
	radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent),
	radial-gradient(circle, transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent) 50px 50px,
	linear-gradient(#A8B1BB 8px, transparent 8px) 0 -4px,
	linear-gradient(0, #A8B1BB 8px, transparent 8px) -4px 0;
background-color: slategray;
background-size:100px 100px, 100px 100px, 50px 50px, 50px 50px;


3. (878 B)

18   CSS3
background: 
  radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 50px 0,
  radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 50px 0,
  radial-gradient(50% 59%, circle, #D2CAAB 3%, #364E27 4%, #364E27 11%, rgba(54,78,39,0) 12%, rgba(54,78,39,0)) 0 50px,
  radial-gradient(50% 41%, circle, #364E27 3%, #D2CAAB 4%, #D2CAAB 11%, rgba(210,202,171,0) 12%, rgba(210,202,171,0)) 0 50px,
  radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%),
  radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%),
  radial-gradient(100% 50%, circle, #D2CAAB 16%, rgba(210,202,171,0) 17%) 50px 50px,
  radial-gradient(0% 50%, circle, #364E27 16%, rgba(54,78,39,0) 17%) 50px 50px;
background-color:#63773F;
background-size:100px 100px;


4.dz (937 B)

18   CSS3
background:
    linear-gradient(126deg, #232927 4%,   transparent 4%) -70px 43px,
    linear-gradient( 54deg, #232927 4%,   transparent 4%) 30px 43px,
    linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
    linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
    linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
    linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
    
    linear-gradient(126deg, #232927 4%,   transparent 4%) -20px 93px,
    linear-gradient( 54deg, #232927 4%,   transparent 4%) 80px 93px,
    linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
    linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
    linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
    linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;


5. Shippo (243 B)

18   CSS3
background-color:#def;
background-image: radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
	radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0, 40px 40px;


6. (357 B)

18   CSS3
background-color: silver;
background-image: linear-gradient(115deg, #b00 23px, transparent 23px),
	linear-gradient(295deg, #d00 23px, transparent 23px),
	linear-gradient(115deg, #b00 23px, transparent 23px),
	linear-gradient(295deg, #d00 23px, transparent 23px);
background-size: 58px 58px;	
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;


7. Seigaiha (1015 B)

18   CSS3
background-color:silver;
background-image: 
	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(50%  100%, circle, white 10%, silver 11%, silver 23%, white 24%, white 30%, silver 31%, silver 43%, white 44%, white 50%, silver 51%, silver 63%, white 64%, white 71%, transparent 71%, transparent),
	radial-gradient(100% 50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent),
	radial-gradient(0    50%,  circle, white 5%, silver 6%, silver 15%, white 16%, white 20%, silver 21%, silver 30%, white 31%, white 35%, silver 36%, silver 45%, white 46%, white 49%, transparent 50%, transparent);
background-size:100px 50px;


8. (691 B)

18   CSS3
background-color:#556;
background-image: linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), 
    linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
background-size:80px 140px;
background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;


9. (198 B)

18   CSS3
background-color:#001;
background-image: radial-gradient(white 15%, transparent 16%),
	radial-gradient(white 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;


10. (282 B)

18   CSS3
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
	linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:60px 60px;
background-position:0 0, 30px 30px


11. ij (247 B)

18   CSS3
background-color: #eee;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), 
	linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-size:60px 60px;


12. Tartan (1.15 KB)

18   CSS3
background-color: hsl(2, 57%, 40%);
background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
  repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
  repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);


13. Madras (1.56 KB)

18   CSS3
background-color: hsl(34, 53%, 82%);
background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,                  
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px       
      ),
  repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, 
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,                
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px       
  );


14. ѳ (394 B)

18   CSS3
background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
  linear-gradient(0, white 2px, transparent 2px),
  linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
  linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px


15. "" (186 B)

18   CSS3
background-color:white;
background-image: linear-gradient(0, rgba(200,0,0,.5) 50%, transparent 50%),
	linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;


16. ij (160 B)

18   CSS3
background-color: gray;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);


17. (128 B)

18   CSS3
background-color: gray;
background-image: linear-gradient(0, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px;


18. (125 B)

18   CSS3
background-color: gray;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px;


.

: ̳
ʳ : 1475

:
:
1
2
3
4
5






  • X
    ':

    E-mail:
    :

    , . :
    ѳ ѳ ѳ