Thu, January 19, 2017

CSS3を効果的に使用しているサイトのまとめ

「Six Revisions」からのご紹介です。
角丸、ドロップシャドウ、RGBA、透過、グラデーションなどを効果的に使用しているサイトを項目ごとに紹介しています。

■角丸を効果的に使用しているサイト

サンプルコード

border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;

Twitter

Ember

ZURB

■テキストシャドウを効果的に使用しているサイト

サンプルコード

text-shadow: 2px 2px 4px #000;

Jolicloud

A Different Design

Time2Project

■ボックスシャドウを効果的に使用しているサイト

サンプルコード

box-shadow: 2px 2px 4px black;
-moz-box-shadow: 2px 2px 4px black;
-webkit-box-shadow: 2px 2px 4px black; 

camen design

CSS-Tricks

■RGBAカラーを効果的に使用しているサイト

サンプルコード

background: rgba(150, 25, 150, 0.5);

International Gorilla Conservation Programme

24 ways

■Opacity(不透明度)を効果的に使用しているサイト

サンプルコード

opacity: 0.5;

Bunton

Peaxl

31Three

■グラデーションを効果的に使用しているサイト

サンプルコード

background: -moz-linear-gradient(100% 100% 90deg, #1a1a1a, #808080)
background: -webkit-gradient(linear, 0 0, 0 100%, from(#1a1a1a), to(#808080));

Philadelphia FIRST

 

情報元:Six Revisions

この記事を共有 :

Twitter Delicious Facebook Digg Stumbleupon Favorites More

Leave a Reply

Spam Protection by WP-SpamFree