- Published on
CSS3でしましまストライプを実装する
619文字2分で読めます–––
閲覧数
- Authors
- Name
- Shou Arisaka nyapp.buzz/shou
- short bio
- Z世代の情報技術者。Next.jsで自作SNSを個人開発中。
サイトのデザインをちょっと更新したので使用したCSSを公開したいと思う。
しましまストライプを実装
.site-header
background: #009999;
background-image: -webkit-gradient(linear,0 0,100% 100%, color-stop(.25,#ffffff), color-stop(.25,transparent), color-stop(.5,transparent), color-stop(.5,#ffffff), color-stop(.75,#ffffff), color-stop(.75,transparent),to(transparent));
-webkit-background-size: 1000px;
上記コードのカラーコードfffを変更することでcolor変更が可能。
-webkit-background-size: 1000px;の値を変更することでしましまの大きさを調整できる。
要素を半透明にする
.main-body-in
background-color: rgba(255, 255, 255, 0.7);
また、背景が主張しすぎると読みにくいため、バックグラウンドに半透明の白紙を設置した。 0.7の値を弄ることで半透明度を変更できる。1.0が不透明。
15歳でWordPressサイトを立ち上げ、ウェブ領域に足を踏み入れる。翌年にはRuby on Railsを用いたマイクロサービス開発に着手し、現在はデジタル庁を支えたNext.jsによるHP作成やSaaS開発のプロジェクトに携わりながら、React.js・Node.js・TypeScriptによるモダンなウェブアプリの個人開発を趣味でも行う。
フロントエンドからバックエンドまで一貫したアジャイルなフルスタック開発を得意とし、ウェブマーケティングや広告デザインも必要に応じて担当、広告運用・SEO対策・データ分析まで行う低コストかつ高品質な顧客体験の提供が好評。
国内外から200万人を超える人々に支えられ、9周年を迎えるITブログ「yuipro」の開発者、デザイナーでありライター。現在ベータ段階の自作SNS「nyapp.buzz」を日本一の国産SNSとするべく奮闘中。
何かご質問がありますか？
