【配色 - デザイン ★★★★★】 - Color Scheme Designer 3
Paletton, the color scheme designer In love with colors, since 2002. Paletton application Colorpedia About Paletton About Paletton Paletton.com is a designer color tool designed for creating color combinations that work together well. It uses classical color theory with ancient artistic RYB color wheel to design color palettes of one to four hues, each of five different shades. Various preview sty
ウェブデザインの配色設計に役立つオンラインサービスのまとめ -2013年春
見て楽しい触って便利な、最近リリースされたものを中心としたウェブデザインの配色設計に役立つオンラインサービスを紹介します。 まずは、気軽にカラーを楽しめるサービスから。
［CSS］だけでオンズのロゴを作ってみた。
ちょっとした遊びゴコロを発揮して CSS だけでオンズのロゴマークを作る方法を模索してみました。 もともと比較的簡単な構成のロゴマークなので、それほど難しくはないと思っていましたので、ちょっとハードルを上げるために１つのルールを定めました。 それは「たった１つの div 要素のみで作る」こと。 つまり使える html は <div class="onze"></div> のみで、あとはスタイルシートを駆使して制作することになります。 具体的には疑似セレクタ「:before」と「:after」を利用することになりますね。 以下、実際にできあがったコードを順を追って説明していきます。 .onze { margin:0 auto; position:relative; width:130px; height:130px; background-color:#1aa; border-radius:
CSSサンプル集
.play { color: #ffba16; font-family: 'FB Condor Bold', sans-serif; font-size: 100px; letter-spacing: 0.2em; padding: 10px 0; -moz-transform: skew(-25deg) rotate(5deg); -ms-transform: skew(-25deg) rotate(5deg); -webkit-transform: skew(-25deg) rotate(5deg); transform: skew(-25deg) rotate(5deg); text-shadow: 0 1px #ff9b0d, 1px 0 #f79100, 1px 2px #ff9b0d, 2px 1px #f79100, 2px 3px #ff9b0d, 3px 2px #f79
擬似要素を使った見出しデザイン
このブログの見出しはシンプルなんですが、CSSの「:before」や「:after」など擬似要素を使えば色々と装飾ができますので今回は8つのサンプルを紹介します。 HTMLはすべてHタグだけです。特に意味はありませんが今回のサンプルはh4タグを使っています。 「:before」「:after」やボーダーで表現する三角形の使い方など慣れない方もいるかもれませんので、その都度簡単に解説していきます。「:before」「:after」疑似要素はIE7以下は非対応ですのでご注意ください。 今回のサンプルは別サーバにアップしていますのでご覧ください。 それでは今回8つのサンプルを紹介していきます。 1. 吹き出しのような見出し1 吹き出しの下の部分を:after擬似要素で作っています。三角形はボーダーで作っています。下の画像を見ると何となくイメージできるでしょうか。今回の場合は上の赤い部分のみ色を付
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css
https://necolas.github.io/normalize.css/5.0.0/normalize.css
