閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。
情報源: jQuery：ページトップへの動きに使えるエフェクト 5 | NxWorld
-
-
ウェブを取り巻く日本語フォント環境 〜CSSのフォント指定はこうすることにしました〜
この記事はシス研 Advent Calendarの24日目の記事です()。 前回はSSHでしたが今回は打って変…
情報源: ウェブを取り巻く日本語フォント環境 〜CSSのフォント指定はこうすることにしました〜
-
Setting bullet colors in UL/LI lists via CSS without using images or span tags
Imagine a simple unsorted list, with some
- items nested inside
- tags. Now, I have defined the bullets to be square shaped via list-style:square; however, if I set the color of the
情報源: Setting bullet colors in UL/LI lists via CSS without ...
- items nested inside
-
リンクやアーカイブのタイトルなどのテキストを置換する
部分的に、翻訳文字列を変更するくらいはCSSでも可能です
WordPressは、ベースが英文で翻訳ファイルを使って日本語表示を行いますが、日本語の翻訳ファイルが無く、リンクなどが英文で表示されることがあります。
翻訳用の関数が適切に使用されている場合は、チャイルドテーマ等で、独自の翻訳ファイルを作成してカスタマイズする事ができますが、PHPのスキルを必要とします。
条件が合えば、CSSでリンク文字列を変更するような事はCSSでも可能で、その方法を知っておくと便利です。
以下 ...
-
CSS color property
color: currentColor
http://caniuse.com/#search=currentColor
color: inherit
http://www.w3schools.com/cssref/css_inherit.asp
color: initial
http://www.w3schools.com/cssref/css_initial.asp
-
CSS Animatable w3school
http://www.w3schools.com/cssref/css_animatable.asp
#myDIV { width: 300px; height: 200px; background: red; -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ @-we ...
-
demosthenes.info – Cross-browser Image Blur with CSS
Defocus photographs with CSS3 filters and SVG.
情報源: demosthenes.info – Cross-browser Image Blur with CSS
