私には才能がまったくありません。 私は知識に情熱を注いでいます

Article

コーディング練習用の20のプロジェクトHTMLとCSS

コーディング練習用の20のプロジェクトHTMLとCSS


November, 25 2021

より良いWebデザインの作成に役立つCSSプロジェクト

今日は、ウェブサイトのデザインを簡単にするためのCSSのトリックをいくつか学びます。

CSSアニメーションサンプル

CSS Text animation

以下の結果をご覧ください。

See the Pen Pure CSS Text animation by Mamun Khandaker (@kh-mamun) on CodePen.

リンク

CSSタイピング効果

CSS Text animation

以下の結果をご覧ください。

See the Pen Text slider with typing animation in pure CSS by Adam Lewiński (@alewinski) on CodePen.

リンク

CSS Text Reveal

CSS Text Reveal

以下の結果をご覧ください。

See the Pen Pure CSS Text Reveal by Mattia Astorino (@equinusocio) on CodePen.

リンク

CSSメニューアニメーション

CSSメニューアニメーション

以下の結果をご覧ください。

See the Pen Animate menu CSS by Joël Lesenne (@joellesenne) on CodePen.

リンク

純粋なCSSナビゲーションオーバーレイ

純粋なCSSナビゲーションオーバーレイ

以下の結果をご覧ください。

See the Pen Pure CSS Navigation Overlay by Alessandro Calvaresi (@boxabrain) on CodePen.

リンク

ツールチップCSS

ツールチップCSS

以下の結果をご覧ください。

See the Pen Pure CSS Tooltip by Cristina Silva (@cristina-silva) on CodePen.

リンク

Pure CSS Accordion

Pure CSS Accordion

以下の結果をご覧ください。

See the Pen Pure CSS Accordion by Eduardo Moreno (@emoreno911) on CodePen.

リンク

CSS Table Design

CSS Table Design

以下の結果をご覧ください。

See the Pen Pure CSS Table Highlight (vertical & horizontal) by Alexander Erlandsson (@alexerlandsson) on CodePen.

リンク

ポップアップ/オーバーレイ効果

ポップアップ/オーバーレイ効果

以下の結果をご覧ください。

See the Pen Daily UI #016 | Pop-up/Overlay by Julie Park (@juliepark) on CodePen.

リンク

Checkbox CSS

Checkbox  CSS

以下の結果をご覧ください。

See the Pen Pure CSS Custom Checkbox by Nikko Aboy (@nikkz) on CodePen.

リンク

Pure CSS Segmented Controls

Pure CSS Segmented Controls

以下の結果をご覧ください。

See the Pen Pure CSS Segmented Controls by François St-Germain (@fstgerm) on CodePen.

リンク

Hover effect of CSS text

Hover effect of CSS text

以下の結果をご覧ください。

See the Pen Info on hover without JS by Guus Lieben (@guuslieben) on CodePen.

リンク

CSSを使用したタブの作成

CSSを使用したタブの作成

以下の結果をご覧ください。

See the Pen Pure css responsive tabs by Martin Gajdičiar (@Fallupko) on CodePen.

リンク

グラデーションテキストアニメーション効果

グラデーションテキストアニメーション効果

以下の結果をご覧ください。

See the Pen Pure CSS Gradient Text Animation Effect by Casey Callow (@caseycallow) on CodePen.

リンク

Hover Blur Effect

Hover Blur Effect

以下の結果をご覧ください。

See the Pen Pure CSS Blur Hover Effect by Matthew Craig (@mcraig218) on CodePen.

リンク

Folded-corner

 Folded-corner

以下の結果をご覧ください。

See the Pen Pure CSS folded-corner effect by Ravinthranath (@ravinthranath) on CodePen.

リンク

CSS Multi-Level Accordion

CSS Multi-Level Accordion

以下の結果をご覧ください。

See the Pen CSS Multi-Level Accordion by Nathan Long (@nathanlong) on CodePen.

リンク

Animation Select Box

 Animation Select Box

以下の結果をご覧ください。

See the Pen Pure CSS Select Box With Direction Aware Hover Effect by Himalaya Singh (@himalayasingh) on CodePen.

リンク

Menu Dropdown

 Menu Dropdown

以下の結果をご覧ください。

See the Pen #CodePenChallenge: Menu by Hakkam Abdullah (@Moslim) on CodePen.

リンク

リンク効果css

 リンク効果css

以下の結果をご覧ください。

See the Pen Pure CSS Magic Line Navbar by Rock Starwind (@RockStarwind) on CodePen.

リンク

Responsive Pure Css Tabs

 リンク効果css

以下の結果をご覧ください。

See the Pen Responsive pure css tabs by Prakash (@imprakash) on CodePen.

リンク

結論

これを念頭に置いて、この記事がWebサイトの成長に役立つCSSのヒントを提供することを願っています。 ご不明な点がございましたら、メールにてお問い合わせください。 できるだけ早くご連絡いたします。 より良い記事を書くことができるようにウェブサイトをサポートしてください。