タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

CSS3とcssに関するlapin0617のブックマーク (2)

  • CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック

    ボタンにテキストを配置する時、上下のスペースを揃えるのに困ったことはありませんか? ボタンのHTMLはそのままで、疑似要素を追加するだけで簡単に揃えられるので、そのCSSのテクニックを紹介します。 Aligning a Button Label Vertically by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ボタンにテキストを配置する時、上下のスペースを揃える 終わりに はじめに デベロッパーのあなたは実装するために、デザインのモックアップを渡されたとします。そのモックアップではかっこよくフォントが使用されており、デザインの中で完璧に見えました。 しかし、CSSで実装してみると、フォントの周りに予期せぬスペースが追加されていることに気がつきました。これは何だと思いますか? そもそ

    CSSでボタンにテキストを配置する時、上下のスペースを簡単に揃えられる実装テクニック
  • 簡単CSSアニメーション&デザイン20選(ソースコードと解説付き)|ベイジの図書館

    CSSは使いようによっては様々な表現が可能な奥深い言語です。しかし、アニメーションなど凝った動きをするものに関してはコードは見れても実装方法を詳しく解説している記事は多くないように思えます。 この記事では、私(さかっちょ)がTwitterで過去にツイートしたCSS技術をCodePenで改めて実装し、Twitterでは解説しきれなかった実装方法をより詳しく説明しています。CSS初学者の方にもわかりやすいように解説していますので、ぜひ参考にしてみてください。 その1. 一文字ずつ登場するテキストアニメーション See the Pen [CSS Tips] Text Show-up Motion by Takuro Sakai (@sakaccho) on CodePen. 一文字ずつtransformで移動させています。文字が途切れることなく流れるようにtransition-delayを調整

    簡単CSSアニメーション&デザイン20選(ソースコードと解説付き)|ベイジの図書館
  • 1