0528転出]Shortcodes-Ultimateのスライダー用ボックス

下書きブログに置いておく

目次(クリックでジャンプ)

スポンサーリンク

概要

神プラグイン「Shortcodes Ultimate」の「スライダー」を中にいれてカッコよくするボックスをデザイン中

デザイン過程

その1(N-boxベース)

外観


改造前

改造後。ヤベェ…カコイイ

CSSソースコード

/*本体(上下の枠を太くして、内外に影を落とした)*/
border-top: solid 24px #82c1fb;
border-bottom: solid 24px #82c1fb;
box-shadow: 2px 3px 10px -1px rgba(0, 0, 0, 0.7) inset, 3px 6px 12px rgba(0,0,0,0.4);

/*タイトル(タイトルの色と上下位置変更)*/
top: -23px;

/*after要素(上下位置を変更)*/
bottom: -19px;

ToDo

after要素はスライダーの中身の上に乗算でのせて、
before要素か、タイトルを下にも追加して「powered by Shortcodes Ultimate」を入れる(恩返しに宣伝する)

タイトルをcenter寄せにする

中にキャプションを入れる(背景色を変える?)

その2

外観


改造前

改造後
CSSソースコード

/*本体*/
border-top: solid 32px #82c1fb;
box-shadow: 4px 5px 5px rgba(0,0,0,0.5), 2px 3px 3px rgba(0,0,0,0.8) inset;
border-width: 36px 5px 24px;
border-radius: 26px;

/*タイトル(液晶画面のように)*/
box-shadow: 1px 2px 1px rgba(0,0,0,0.5) inset;
border-radius: 9px;
color: #908e8a;
top: -29px;
left: 10px;
padding: 4px 11px 0;
background: #efeeec;

/*after要素*/
color: #5492cc;
right: 8px;
bottom: -19px;

タイトルとURLをコピーしました