IT pomocník

CSS3 přineslo mnoho nových vlastností a možností pro stylování webových stránek. Zde je seznam některých konkrétních vylepšení a novinek, které CSS3 přineslo:

Selectors: CSS3 přidal nové selektory, které umožňují zvolit prvky podle různých kritérií, jako například :nth-child(), :nth-of-type(), :last-child, :not() a další. To umožňuje složitější a specifičtější cílení prvků.
Box Model: Byly přidány nové vlastnosti pro ovládání box modelu, jako jsou box-sizing, který umožňuje definovat, zda se padding a border zahrnují v rozměrech prvku.
Border-radius: CSS3 umožnil zaoblití rohů prvků pomocí border-radius, což bylo důležité pro vytváření kulatých rohů a designových prvků.
Text Effects: Byly přidány nové vlastnosti pro ovládání efektů na textu, jako jsou text-shadow, který umožňuje přidávat stíny k textu.
Gradients: CSS3 umožnil definování barevných přechodů pomocí gradientů. To umožnilo vytváření plynulých barevných efektů bez použití obrázků.
Transitions: Byly přidány přechody (transitions), což umožňuje plynulé změny vlastností prvků (jako změna barvy, velikosti, pozice) v reakci na události jako je najetí myší.
Animations: CSS3 zavedl animace (@keyframes), což umožňuje definovat komplexní animační sekvence pro prvky na stránce.
Transformations: Byly přidány transformace (transform), což umožňuje provádět různé transformace, jako jsou rotace, změna měřítka a zkosení, na prvcích.
Flexbox: Byl přidán model rozložení Flexbox, což umožňuje snazší a flexibilnější uspořádání prvků v rámci kontejneru.
Grid: Byl přidán CSS Grid Layout, což je výkonný systém pro uspořádání prvků v mřížce, což usnadňuje vytváření komplexních layoutů.
Media Queries: Media Queries byly rozšířeny, což umožňuje definovat různé styly pro různá zařízení a obrazovky.
Fonts: CSS3 umožnil rozšiřující specifikace pro písma, včetně vlastností jako @font-face, která umožňuje vkládání vlastních písem.
Shadows: CSS3 přidal možnost definovat stíny pro prvky pomocí vlastnosti box-shadow.
Opacity: Přidání vlastnosti opacity, která umožňuje nastavit průhlednost prvků.
Multiple Backgrounds: Možnost přidat více pozadí k jednomu prvku pomocí vlastnosti background.

Toto jsou pouze některé z novinek, které CSS3 do webového stylování přineslo. CSS3 přineslo mnoho dalších vylepšení a možností, které umožnily tvůrcům webů vytvářet sofistikovanější a vizuálně poutavější stránky.

Samozřejmě, zde je několik příkladů CSS stylů spolu s odpovídajícími HTML implementacemi:

1. Zaoblené rohy a pozadí:

.rounded-box {
  border-radius: 10px;
  background-color: #f2f2f2;
  padding: 20px;
}

HTML:

<div class="rounded-box">
  <p>This is a box with rounded corners and a background color.</p>
</div>

2. Barevný text s textovým stínem:

.colorful-text {
  color: #ff6600;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

HTML:

<p class="colorful-text">This text is colorful with a shadow.</p>

3. Gradientní pozadí:

.gradient-bg {
  background: linear-gradient(to bottom, #66ccff, #003366);
  color: white;
  padding: 10px;
}

HTML:

<div class="gradient-bg">
  <p>This box has a gradient background.</p>
</div>

4. Animace rotace:

.rotate-animation {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML:

<div class="rotate-animation">
  <p>This text is rotating.</p>
</div>

5. Flexbox uspořádání:

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-item {
  flex: 1;
  padding: 10px;
}

HTML:

<div class="flex-container">
  <div class="flex-item">Item 1</div>
  <div class="flex-item">Item 2</div>
  <div class="flex-item">Item 3</div>
</div>

Co se týče display: flex;, jedná se o CSS vlastnost, která určuje, jak se elementy uvnitř prvku budou řadit ve flexibilním kontextu. V případě display: flex; se prvky uvnitř flexového kontejneru chovají jako flexové položky. Flexbox je flexibilní layoutový model, který umožňuje jednoduše organizovat a zarovnávat prvky ve směru řádku nebo sloupce, a to s možností rovnoměrného rozložení, zarovnání, centrace a dalších vlastností.

Příklad:

.flex-container {
  display: flex;
  justify-content: center; /* Zarovnání obsahu horizontálně na střed */
  align-items: center; /* Zarovnání obsahu vertikálně na střed */
}

V tomto příkladu flex-container je prvek, který je nastavený na flexbox layout. Všechny prvky uvnitř flex-container budou seřazeny podle flexbox pravidel, která jsou nastavena pomocí různých CSS vlastností jako justify-content, align-items, atd.

Toto jsou jen některé základní příklady, jak můžete použít CSS styly ve spojení s HTML. Každý z těchto stylů přidá určitou vizuální úpravu nebo chování k vašim webovým prvkům.

Selectors:

/* Vybrání všech lichých prvků */
:nth-child(odd) {
  background-color: lightgray;
}

/* Vybrání všech prvků kromě prvního a posledního */
:not(:first-child):not(:last-child) {
  margin: 10px;
}

Box Model:

/* Zvětšení paddingu a borderu */
.box {
  padding: 20px;
  border: 2px solid black;
}

Border-radius:

/* Zaoblené rohy */
.rounded-box {
  border-radius: 10px;
}

Text Effects:

/* Stínování textu */
.text-shadow {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

Gradients:

/* Lineární gradientní pozadí */
.gradient-background {
  background: linear-gradient(to bottom, #ffcc00, #ff6600);
}

Transitions:

/* Přechod změny barvy na hover */
.transition-example {
  transition: background-color 0.3s ease;
}
.transition-example_hover:hover {
  background-color: lightblue;
}

Transformations:

/* Rotace a zkosení prvku */
.transform-example_rotate {
  transform: rotate(45deg) skewX(10deg);
}

Flexbox:

/* Flexbox layout */
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid:

/* Grid layout */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

Media Queries:

/* Responsivní design pro menší zařízení */
@media (max-width: 768px) {
  .responsive-element {
    font-size: 14px;
  }
}

Fonts:

/* Použití vlastního fontu */
.custom-font {
  font-family: 'YourFont', sans-serif;
}

Shadows:

/* Stínování prvku */
.shadow-example {
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
}

Opacity:

/* Průhlednost prvku */
.transparent-element {
  opacity: 0.7;
}

Font-face

V příkladu, který jsem poskytl, jsem použil název fontu "YourFont", což by měl být vymyšlený název fontu, který byste chtěli použít. Když chcete použít vlastní font, který není standardní součástí webového prohlížeče, používáte pravidlo @font-face k definici tohoto fontu a pak ho můžete použít pomocí font-family.

Zde je správný příklad použití @font-face:

Nejprve definujete font pomocí @font-face v sekci CSS:

@font-face {
  font-family: 'YourFont'; /* Jméno, které budete používat pro font */
  src: url('your-font.woff2') format('woff2'), /* Cesta k .woff2 souboru fontu */
       url('your-font.woff') format('woff'); /* Cesta k .woff souboru fontu */
  /* Další formáty a varianty fontu můžete přidat zde */
}

Pak můžete tento font použít na libovolném prvku ve vašem HTML:

html

<!DOCTYPE html>
<html>
<head>
  <style>
    .custom-font {
      font-family: 'YourFont', sans-serif; /* Použití definovaného fontu */
    }
  </style>
</head>
<body>
  <div class="custom-font">Tento text používá vlastní font</div>
</body>
</html>

V tomto příkladu nahraďte 'your-font.woff2' a 'your-font.woff' skutečnými cestami k vašemu vlastnímu fontu ve formátech WOFF2 a WOFF. Tímto způsobem můžete na svých webových stránkách použít vlastní fonty, které nejsou součástí standardních fontů prohlížeče.

HTML KÓD

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Vybrání všech lichých prvků */
    :nth-child(odd) {
      background-color: lightgray;
    }

    /* Vybrání všech prvků kromě prvního a posledního */
    :not(:first-child):not(:last-child) {
      margin: 10px;
    }

    /* Zvětšení paddingu a borderu */
    .box {
      padding: 20px;
      border: 2px solid black;
    }

    /* Zaoblené rohy */
    .rounded-box {
      border-radius: 10px;
    }

    /* Stínování textu */
    .text-shadow {
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Lineární gradientní pozadí */
    .gradient-background {
      background: linear-gradient(to bottom, #ffcc00, #ff6600);
    }

    /* Přechod změny barvy na hover */
    .transition-example {
      transition: background-color 0.3s ease;
    }
    .transition-example:hover {
      background-color: lightblue;
    }

    /* Rotace a zkosení prvku */
    .transform-example_rotate {
      transform: rotate(45deg) skewX(10deg);
    }

    /* Flexbox layout */
    .flex-container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Grid layout */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
    }

    /* Responsivní design pro menší zařízení */
    @media (max-width: 768px) {
      .responsive-element {
        font-size: 14px;
      }
    }

    /* Použití vlastního fontu */
    .custom-font {
      font-family: 'YourFont', sans-serif;
    }

    /* Stínování prvku */
    .shadow-example {
      box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);
    }

    /* Průhlednost prvku */
    .transparent-element {
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="box">Box with padding and border</div>
  <div class="rounded-box">Box with rounded corners</div>
  <div class="text-shadow">Text with shadow</div>
  <div class="gradient-background">Gradient background</div>
  <div class="transition-example">Hover to change color</div>
  <div class="transform-example_rotate">Rotated and skewed element</div>
  <div class="flex-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
  </div>
  <div class="responsive-element">Responsive text</div>
  <div class="custom-font">Custom font</div>
  <div class="shadow-example">Element with shadow</div>
  <div class="transparent-element">Transparent element</div>
</body>
</html>  
 
 
CSS Custom Properties (Variables)
Vlastnosti umožňují definovat vlastní proměnné pro opakující se hodnoty, což usnadňuje údržbu a změny v kódu. 
 
<!DOCTYPE html>
<html>
<head>
  <style>
    :root {
      --main-color: #3498db;
    }

    .custom-box {
      width: 200px;
      height: 200px;
      background-color: var(--main-color);
    }
  </style>
</head>
<body>
  <div class="custom-box"></div>
</body>
</html> 
 
Slovo :root v CSS reprezentuje kořenový prvek dokumentu, který je většinou ekvivalentní k <html>
 elementu. Je to takový globální kontext pro definování CSS vlastností, které mohou být později použity na všech prvcích stránky. V příkladu s :root a --main-color se definuje vlastní proměnná (také nazývaná custom property nebo variable) --main-color s hodnotou #3498db, což je základní barva, kterou můžete poté použít na různých prvcích stránky. 
CSS Filters a Blend Modes
Tyto vlastnosti umožňují vytvářet různé vizuální efekty, jako jsou 
filtry (sepia, rozostření atd.) a směsi prvků podle různých režimů. 
<!DOCTYPE html>
<html>
<head>
  <style>
    .image {
      width: 300px;
      height: 200px;
      background-image: url('image.jpg');
      filter: grayscale(50%);
      mix-blend-mode: multiply;
    }
  </style>
</head>
<body>
  <div class="image"></div>
</body>
</html>
CSS Scroll Snap
Umožňuje definovat konkrétní body "skoku" při posouvání stránky, což je 
užitečné pro tvorbu responzivních a příjemných scrollovacích efektů. 
<!DOCTYPE html>
<html>
<head>
  <style>
    .scroll-container {
      display: flex;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
    }

    .scroll-item {
      flex: 0 0 auto;
      width: 100%;
      scroll-snap-align: start;
    }
  </style>
</head>
<body>
  <div class="scroll-container">
    <div class="scroll-item">1</div>
    <div class="scroll-item">2</div>
    <div class="scroll-item">3</div>
  </div>
</body>
</html>
CSS @supports Rule
Umožňuje zjišťovat, zda prohlížeč podporuje konkrétní vlastnosti CSS, což umožňuje postupné zavádění moderních funkcí. 
<!DOCTYPE html>
<html>
<head>
  <style>
    @supports (display: grid) {
      .grid-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
      }
    }

    @supports not (display: grid) {
      .grid-container {
        display: flex;
        justify-content: space-between;
      }
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div>Item 1</div>
    <div>Item 2</div>
  </div>
</body>
</html>
CSS Scroll Behavior
Umožňuje definovat chování scrollování v rámci stránky, například plynulé skrolování k určitým cílům. 
<!DOCTYPE html>
<html>
<head>
  <style>
    html {
      scroll-behavior: smooth;
    }

    .section {
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }

    .section:nth-child(odd) {
      background-color: #f0f0f0;
    }

    .section:nth-child(even) {
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
  <div class="section">Section 3</div>
</body>
</html>

IT pomocník

neděle 13. srpna 2023

CSS3 features & examples: font-face, text-shadow, gradient-background, transition, nth-child, not

CSS Custom Properties (Variables)

CSS Filters a Blend Modes

CSS Scroll Snap

CSS @supports Rule

CSS Scroll Behavior

Žádné komentáře:

Okomentovat

Jak zkopírovat styly jako font a odstavec v LibreOffice Write?

Štítky

Pravidelní čtenáři

Nahlásit zneužití