Забележка

За съвременни браузери при изграждането на layout-а на страницата се препоръчва използването на:

CSS Grid Layout

CSS Flexbox

Тези теми се разглеждат в курса за напреднали.

Но разбирането на следващите примери е важно за усвояване на CSS основите.

VerticalAndHorizontalCentering

Проблем: не знаем предварително височината на контейнера и на вътрешния елемент, който ще центрираме

Решение: позиционираме вътрешния контейнер абсолютно, спрямо родителя и го отместваме с transform: translate()

See the Pen Center an element: with position and translate by Iva Popova (@webdesigncourse) on CodePen.

centeredParent_WithFromChildren_InlineBlockVariant

Проблем:Искаме да центрираме хоризонтално 3 колони в контейнер, една до друга, с предварително зададена широчина. В такъв случаи, не можем да зададем широчина на контейнера и да използваме margin: 0 auto

Решение: Чрез display: inline-block

See the Pen centeredParent_WithFromChildren_InlineBlockVariant by Iva Popova (@webdesigncourse) on CodePen.

centeredParent_WithFromChildren_FloatVariant

Проблем:Искаме да центрираме хоризонтално 3 колони в контейнер, една до друга, с предварително зададена широчина. В такъв случаи, не можем да зададем широчина на контейнера и да използваме margin: 0 auto

Решение: Чрез float

See the Pen centeredParent_WithFromChildren_FloatVariant by Iva Popova (@webdesigncourse) on CodePen.

Layout: 3 колони с "гъвкава" височина:

В този layout, височината на колоните се определя автоматично, спрямо най-високата колона. При динамично съдържание, колоните се разтягат/скъсяват според съдържанието на най-високата колона.

See the Pen ThreeCoumnsFloated-EqualSize by Iva Popova (@webdesigncourse) on CodePen.

Simple Overlay

See the Pen simpleOverlay by Iva Popova (@webdesigncourse) on CodePen.

Simple overlay with pseudo element

See the Pen simpleOverlayWithPseudoElement by Iva Popova (@webdesigncourse) on CodePen.

Overlay

See the Pen simple_overlay_demo by Iva Popova (@webdesigncourse) on CodePen.

Show and animate image on hover

See the Pen animatedHelloEffect by Iva Popova (@webdesigncourse) on CodePen.

Filter/Opacity on BG Image Only

See the Pen Untitled by Iva Popova (@webdesigncourse) on CodePen.

See the Pen StaticParalax_CSS_Simplest by Iva Popova (@webdesigncourse) on CodePen.

SmoothScrollingWithHashLinks-PureJS

See the Pen SmoothScrollingWithHashLinks-PureJS by Iva Popova (@webdesigncourse) on CodePen.

Animated Scroll with AOS

Анимирани скрол ефекти от библиотеката: AOS

See the Pen Animated Scroll with AOS by Iva Popova (@webdesigncourse) on CodePen.

CSS Only Parallax Scroll With Transform

See the Pen CSS Only Parallax Scroll by Iva Popova (@webdesigncourse) on CodePen.

Simple Parallax With Vanilla JS

See the Pen SimpleParallaxWithVanillaJS by Iva Popova (@webdesigncourse) on CodePen.

Change Header opacity on scroll

See the Pen changeHeaderOpacityOnScroll by Iva Popova (@webdesigncourse) on CodePen.

Drop-Down Vertical Menu - show on Hover

See the Pen Drop-Down Vertical Menu - show on Hover by Iva Popova (@webdesigncourse) on CodePen.

Drop-Down Vertical Menu - show on Click

See the Pen Drop-Down Vertical Menu - show on Click by Iva Popova (@webdesigncourse) on CodePen.

Slider With Interval And Clearing

See the Pen Slider With Interval And Clearing by Iva Popova (@webdesigncourse) on CodePen.

Load Multimple content in one div

See the Pen multimpleContentInOneDiv by Iva Popova (@webdesigncourse) on CodePen.

Simple Accordeon with Pure JS and CSS animation

See the Pen Simple Accordeon with Pure JS and CSS animation by Iva Popova (@webdesigncourse) on CodePen.

Sound on hover - simplest

See the Pen Sound on hover - simplest by Iva Popova (@webdesigncourse) on CodePen.

Sounds on hover - on various items

See the Pen Sounds on hover - on various items by Iva Popova (@webdesigncourse) on CodePen.

codepen

Моята колекция с всички примери в тази тема.

Освен статиите и примерите в сайта css-tricks.com бихте могли да разгледате и примерите, които са качили в CSS-tricks @codepen

Примери за най-различни компоненти и трикове: W3Schools How To