CSSだけで使えるスライダー10選「10 Free Open Source Carousel Sliders Built With Pure CSS」
TOP > WebDesign > CSSだけで使えるスライダー10選「10 Free Open Source Carousel Sliders Built With Pure CSS」 情報を詰め込んだWEBサイト、どれもこれも見せたいのですが、そのためには情報を有効的に見せる事が重要になってきます。今回紹介するのは情報を魅力的に見せることができる、CSSだけで表現されたスライダーをまとめたエントリー「10 Free Open Source Carousel Sliders Built With Pure CSS」です。 Pure-CSS Netflix Show Carousel スライダーとひとことで言っても様々な表現があります。今回は集められているスライダーの中でも気になったものをピックアップしてみました。 詳しくは以下 Pure CSS, annotated linear
CSSのbeforeやafterを送信ボタンで使う場合の対策とコーディング時の注意点 | web(K)campus|WEBデザイナーのための技術系メモサイト
コーディング作業中に一瞬ハマってしまったのでメモ。 フォーム周りの送信ボタンのコーディングの際に右側にafter要素を使ってアイコンを設置しようとした時に、何をやってもアイコンを表示させれなかった。 ↓こんなの 調べてみると、input要素にはbeforeやafterのような疑似要素は効かないらしい。 アイコンを表示させれない（疑似要素が効かない）inputで記述 <input type="submit" value="送信する" class="submitbtn"/> アイコンを表示させれる（疑似要素が効く）button要素 <button type="submit" class="submitbtn">送信する</button> .submitbtn{ position: relative; border: 1px solid #ccc; border-radius: 5px; bac
BoxにCSSのみで2重のborderを引く方法を4つまとめた | web(K)campus|WEBデザイナーのための技術系メモサイト
画像を使わず、CSSのみで装飾を済ませるのが多い今のコーディング事情で、ボックスに2重線を引く方法といえば、borderとoutlineをあてたり、box-shadowを当てたり、疑似要素を使ったり、色々な方法があります。 思いついた2重線の書き方のまとめ。 outlineを使って2重線 ボックスの外側にborder。内側にoutlineってイメージです。 .w-border01{ border: solid 1px #fff; outline: solid 1px #c414ba; background-color: #c414ba; padding: 5px 20px; } box-shadowを使って2重線 影をぼかしなしで2重であてる。境界線を複数あてれなかったCS時期のPhotoshopのレイヤースタイルを思い出します。 .w-border02{ box-shadow: 0 0
レスポンシブデザインのためのモックアップ「15+ Mockups to Showcase Your Responsive Web Designs」
TOP > Design , Tool > レスポンシブデザインのためのモックアップ「15+ Mockups to Showcase Your Responsive Web Designs」 デザインの提案をする際に役に立つのがモックアップ。不確実なものを実際のイメージに近い形で表現しながらデザインを確認できるので、イメージが明確になり、プレゼンテーションの手法としてはとても便利です。今回紹介するのは、レスポンシブデザインをプレゼンテーションするのに便利なモックアップ「15+ Mockups to Showcase Your Responsive Web Designs」です。 Showcase Website Header Mockup | MockupWorld 実際のPCにはめたものワイヤーフレーム上のものなど、様々な段階・用途に合わせて使用できるモックアップまとめられていま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
