note自由帳

HOME >  今日の朝活(CSSで歪んだ円+ブレンドモード+アニメーション)

今日の朝活(CSSで歪んだ円+ブレンドモード+アニメーション)


おはようございます。
湘南・茅ヶ崎のホームページ制作会社 VIVIBOND(ヴィヴィボンド)のミナベ(@desco_dayo)です。
よく見かけるCSSの実装をしてみます。

◆四角形の角をデザインしてみる

  

 

◆円を歪ませて更に少しだけ重ねてみる

おはようございます。茅ヶ崎は空気が澄んで爽やかな朝です。富士山もはっきりと見えて清々しいです。
こんにちは。今日は天気がいいからサザンビーチのカフェで江の島と烏帽子岩を眺めながらランチでもどうでしょう?
こんばんは。今夜はよく働いたから茅ヶ崎駅北口エメロードのホップマンでクラフトビールを堪能しちゃおうかな!

 

今回参考にさせていただいた元記事

今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦!

感想

コンテンツ内でちょっとアクセントをつけたいときに便利な実装ですね。
歪ませて少し重ねた描写で要素を横並びにさせるのに「display: flex;」を使っていますが、このCSSすごく便利ですね!


VIVIBOND 三鍋 忍 (代表/WEBディレクター)

2005年よりフリーランスでWEB制作業をスタート。
丁寧なヒアリングと確かなプランニングで、エンドユーザーを意識したwebサイトの制作をモットーとする。

【対応領域】
WEBサイト(ホームページ)のプランニング、ディレクション、デザイン、コーディング(XHTML/CSS)WordPressサイト構築、ネットショッピングサイト構築、ブログ構築、IT顧問、パソコン教室運営

【経歴】
2005年
趣味が高じてフリーランスWEBデザイナーに転身。

2010年
男児を出産。生後6か月で仕事復帰。
理想のワークライフバランスの実現を目指して、育児と仕事に日々奮闘。

2016年
企業のIT顧問サービスをスタート。 実務向けパソコンスクール「FLEX web」をスタート。

2017年
子どもが通う学校の長期休業に合わせた働き方を試験実施。

【参加団体】
Chigasaki-Guild.NET

PCSP

PAGE TOP