CSSで画像を丸く、枠線ありに処理しまた画像に、マウスオーバーでズームのアクションを設定。
各カラムの上位置をCSSで調整することで、横並びの一覧に変化を与えます。背景の色から画像が上にずれたようにすることで変化あるレイアウト。
マウスオーバーの動きはcssで設定。
色付きの背景はウィンドウ幅いっぱいでの利用を想定した設定になっています。円弧・斜めの背景などはSVGデータをカスタムタグで入れています。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
1つのブロックで背景の色を途中までになるようにCSSの背景要素で指定したバリエーション。
ブロック自体のbackgroundにlinear-gradientで２色になるように指定。色の変更も２色の割合もCSSで変更可能。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
2つのブロックで背景の色を途中までになるようにCSSの背景要素で指定したバリエーション。
上のブロックはわずかな高さのSVGを配置して、下のブロックではカラムごとにmargin-topの値を設定していますので、カラムの増減にはCSSの調整が必要になります。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
円弧の背景をSVGで作成し、円弧に合わせて各カラムの位置をCSSで調整しました。
カラムごとにmargin-topの値を設定していますので、カラムの増減にはCSSの調整が必要になります。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
斜めの背景をSVGで作成し、斜めに合わせて各カラムの位置をCSSで調整しました。
カラムごとにmargin-topの値を設定していますので、カラムの増減にはCSSの調整が必要になります。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。
