Rename language articles
This commit is contained in:
Angelos Chalaris
303
snippets/css/s/25-css-gradients.md
Normal file
303
snippets/css/s/25-css-gradients.md
Normal file
@ -0,0 +1,303 @@
|
||||
---
|
||||
title: 25 CSS gradients for your next project
|
||||
shortTitle: CSS gradients
|
||||
type: cheatsheet
|
||||
language: css
|
||||
tags: [visual]
|
||||
author: chalarangelo
|
||||
cover: colors-mural
|
||||
excerpt: We hand picked 25 of our favorite CSS gradients from uiGradients for your next design. Get them now!
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
[uiGradients](https://uigradients.com/) has an amazing collection of ready-to-use CSS gradients for pretty much anything. I highly recommend checking out the full collection. Meantime, here are our top picks in case you're looking for some color:
|
||||
|
||||
<style>
|
||||
.gradient-box {
|
||||
width: 100%;
|
||||
height: 64px;
|
||||
border-radius: 8px 8px 0 0;
|
||||
margin-bottom: -16px;
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.gradient-box + .gatsby-highlight > pre.blog-code {
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
|
||||
.stripe {
|
||||
background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
|
||||
}
|
||||
.flare {
|
||||
background: linear-gradient(to right, #f12711, #f5af19);
|
||||
}
|
||||
.vanusa {
|
||||
background: linear-gradient(to right, #da4453, #89216b);
|
||||
}
|
||||
.sublime-light {
|
||||
background: linear-gradient(to right, #fc5c7d, #6a82fb);
|
||||
}
|
||||
.bighead {
|
||||
background: linear-gradient(to right, #c94b4b, #4b134f);
|
||||
}
|
||||
.velvet-sun {
|
||||
background: linear-gradient(to right, #e1eec3, #f05053);
|
||||
}
|
||||
.relay {
|
||||
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
|
||||
}
|
||||
.crystal-clear {
|
||||
background: linear-gradient(to right, #159957, #155799);
|
||||
}
|
||||
.celestial {
|
||||
background: linear-gradient(to right, #c33764, #1d2671);
|
||||
}
|
||||
.ibiza-sunset {
|
||||
background: linear-gradient(to right, #ee0979, #ff6a00);
|
||||
}
|
||||
.fresh-turboscent {
|
||||
background: linear-gradient(to right, #f1f2b5, #135058);
|
||||
}
|
||||
.cheer-up-emo-kid {
|
||||
background: linear-gradient(to right, #556270, #ff6b6b);
|
||||
}
|
||||
.starfall {
|
||||
background: linear-gradient(to right, #f0c27b, #4b1248);
|
||||
}
|
||||
.nelson {
|
||||
background: linear-gradient(to right, #f2709c, #ff9472);
|
||||
}
|
||||
.forever-lost {
|
||||
background: linear-gradient(to right, #5d4157, #a8caba);
|
||||
}
|
||||
.blurry-beach {
|
||||
background: linear-gradient(to right, #d53369, #cbad6d);
|
||||
}
|
||||
.influenza {
|
||||
background: linear-gradient(to right, #c04848, #480048);
|
||||
}
|
||||
.calm-darya {
|
||||
background: linear-gradient(to right, #5f2c82, #49a09d);
|
||||
}
|
||||
.titanium {
|
||||
background: linear-gradient(to right, #283048, #859398);
|
||||
}
|
||||
.pinky {
|
||||
background: linear-gradient(to right, #dd5e89, #f7bb97);
|
||||
}
|
||||
.purple-paradise {
|
||||
background: linear-gradient(to right, #1d2b64, #f8cdda);
|
||||
}
|
||||
.horizon {
|
||||
background: linear-gradient(to right, #003973, #e5e5be);
|
||||
}
|
||||
.noon-to-dusk {
|
||||
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
|
||||
}
|
||||
.jshine {
|
||||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
}
|
||||
.argon {
|
||||
background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="gradient-box stripe"></div>
|
||||
|
||||
```css
|
||||
.stripe {
|
||||
background: linear-gradient(to right, #1fa2ff, #12d8fa, #a6ffcb);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box flare"></div>
|
||||
|
||||
```css
|
||||
.flare {
|
||||
background: linear-gradient(to right, #f12711, #f5af19);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box vanusa"></div>
|
||||
|
||||
```css
|
||||
.vanusa {
|
||||
background: linear-gradient(to right, #da4453, #89216b);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box sublime-light"></div>
|
||||
|
||||
```css
|
||||
.sublime-light {
|
||||
background: linear-gradient(to right, #fc5c7d, #6a82fb);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box bighead"></div>
|
||||
|
||||
```css
|
||||
.bighead {
|
||||
background: linear-gradient(to right, #c94b4b, #4b134f);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box velvet-sun"></div>
|
||||
|
||||
```css
|
||||
.velvet-sun {
|
||||
background: linear-gradient(to right, #e1eec3, #f05053);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box argon"></div>
|
||||
|
||||
```css
|
||||
.argon {
|
||||
background: linear-gradient(to right, #03001e, #7303c0, #ec38bc, #fdeff9);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box celestial"></div>
|
||||
|
||||
```css
|
||||
.celestial {
|
||||
background: linear-gradient(to right, #c33764, #1d2671);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box relay"></div>
|
||||
|
||||
```css
|
||||
.relay {
|
||||
background: linear-gradient(to right, #3a1c71, #d76d77, #ffaf7b);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box crystal-clear"></div>
|
||||
|
||||
```css
|
||||
.crystal-clear {
|
||||
background: linear-gradient(to right, #159957, #155799);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box ibiza-sunset"></div>
|
||||
|
||||
```css
|
||||
.ibiza-sunset {
|
||||
background: linear-gradient(to right, #ee0979, #ff6a00);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box fresh-turboscent"></div>
|
||||
|
||||
```css
|
||||
.fresh-turboscent {
|
||||
background: linear-gradient(to right, #f1f2b5, #135058);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box cheer-up-emo-kid"></div>
|
||||
|
||||
```css
|
||||
.cheer-up-emo-kid {
|
||||
background: linear-gradient(to right, #556270, #ff6b6b);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box starfall"></div>
|
||||
|
||||
```css
|
||||
.starfall {
|
||||
background: linear-gradient(to right, #f0c27b, #4b1248);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box nelson"></div>
|
||||
|
||||
```css
|
||||
.nelson {
|
||||
background: linear-gradient(to right, #f2709c, #ff9472);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box forever-lost"></div>
|
||||
|
||||
```css
|
||||
.forever-lost {
|
||||
background: linear-gradient(to right, #5d4157, #a8caba);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box blurry-beach"></div>
|
||||
|
||||
```css
|
||||
.blurry-beach {
|
||||
background: linear-gradient(to right, #d53369, #cbad6d);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box influenza"></div>
|
||||
|
||||
```css
|
||||
.influenza {
|
||||
background: linear-gradient(to right, #c04848, #480048);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box jshine"></div>
|
||||
|
||||
```css
|
||||
.jshine {
|
||||
background: linear-gradient(to right, #12c2e9, #c471ed, #f64f59);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box calm-darya"></div>
|
||||
|
||||
```css
|
||||
.calm-darya {
|
||||
background: linear-gradient(to right, #5f2c82, #49a09d);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box titanium"></div>
|
||||
|
||||
```css
|
||||
.titanium {
|
||||
background: linear-gradient(to right, #283048, #859398);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box pinky"></div>
|
||||
|
||||
```css
|
||||
.pinky {
|
||||
background: linear-gradient(to right, #dd5e89, #f7bb97);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box purple-paradise"></div>
|
||||
|
||||
```css
|
||||
.purple-paradise {
|
||||
background: linear-gradient(to right, #1d2b64, #f8cdda);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box horizon"></div>
|
||||
|
||||
```css
|
||||
.horizon {
|
||||
background: linear-gradient(to right, #003973, #e5e5be);
|
||||
}
|
||||
```
|
||||
|
||||
<div class="gradient-box noon-to-dusk"></div>
|
||||
|
||||
```css
|
||||
.noon-to-dusk {
|
||||
background: linear-gradient(to right, #ff6e7f, #bfe9ff);
|
||||
}
|
||||
```
|
||||
80
snippets/css/s/flexbox-cheatsheet.md
Normal file
80
snippets/css/s/flexbox-cheatsheet.md
Normal file
@ -0,0 +1,80 @@
|
||||
---
|
||||
title: Flexbox Cheat Sheet
|
||||
type: cheatsheet
|
||||
language: css
|
||||
tags: [layout,flexbox,cheatsheet]
|
||||
author: chalarangelo
|
||||
cover: frames
|
||||
excerpt: Flexbox allows you to create fluid layouts easily. If you are constantly looking up how it works, this handy cheatsheet is all you need.
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
### Container
|
||||
|
||||
- `display: flex` or `display: inline-flex`: creates a flex context (or an inline flex context) for direct children of this element
|
||||
- `flex-direction` determines the main and cross axis for the container, valid values are:
|
||||
- `row` (default): horizontal, in the direction of writing (left to right for English)
|
||||
- `row-reverse`: horizontal, in the opposite direction of writing (right to left for English)
|
||||
- `column`: vertical, top to bottom
|
||||
- `column-reverse`: vertical, bottom to top
|
||||
- `flex-wrap` determines if flex items will try to fit in one line, valid values are:
|
||||
- `nowrap` (default): all flex items will be on one line
|
||||
- `wrap`: flex items will wrap onto multiple lines, top to bottom
|
||||
- `wrap-reverse`: flex items will wrap onto multiple lines, bottom to top
|
||||
- `flex-flow`: shorthand combining `flex-direction` and `flex-wrap`
|
||||
- Formal syntax: `flex-flow: <'flex-direction'> || <'flex-wrap'>`
|
||||
- `justify-content` defines the alignment along the main axis, valid values are:
|
||||
- `flex-start` (default): pack flex items from the start
|
||||
- `flex-end`: pack flex items from the end
|
||||
- `start`: pack items from the start
|
||||
- `end`: pack items from the end
|
||||
- `left`: pack items from the left
|
||||
- `right`: pack items from the right
|
||||
- `center`: pack items around the center
|
||||
- `space-around`: distribute items evenly with equal space around them
|
||||
- `space-between`: distribute items evenly with equal space between them
|
||||
- `space-evenly`: distribute items evenly, ensuring equal space between any two items
|
||||
- `stretch`: distribute items evenly, stretching auto-sized items to fit the container
|
||||
- `align-items` defines the alignment along the cross axis, valid values are:
|
||||
- `flex-start` (default): pack flex items from the start
|
||||
- `flex-end`: pack flex items from the end
|
||||
- `start`: pack items from the start
|
||||
- `end`: pack items from the end
|
||||
- `center`: pack items around the center
|
||||
- `baseline`: align items based on their baselines
|
||||
- `stretch`: stretch items to fill the container
|
||||
- `align-content` defines the alignment of extra space along the cross axis, valid values are:
|
||||
- `flex-start` (default): pack flex items from the start
|
||||
- `flex-end`: pack flex items from the end
|
||||
- `start`: pack items from the start
|
||||
- `end`: pack items from the end
|
||||
- `center`: pack items around the center
|
||||
- `space-around`: distribute items evenly with equal space around them
|
||||
- `space-between`: distribute items evenly with equal space between them
|
||||
- `space-evenly`: distribute items evenly, ensuring equal space between any two items
|
||||
- `stretch`: distribute items evenly, stretching auto-sized items to fit the container
|
||||
|
||||
|
||||
|
||||
### Items
|
||||
|
||||
- `flex-grow` determines how much the item can grow if necessary
|
||||
- Accepts a single positive number (unitless), default value is `0`
|
||||
- Specifies how much of the remaining space in the flex container should be assigned to the item
|
||||
- The remaining space is the size of the flex container minus the size of all flex items' sizes together
|
||||
- If all items have the same `flex-grow`, all items will receive an equal share of the remaining space
|
||||
- If not all items have the same `flex-grow`, the remaining space is distributed according to the ratio defined by these values
|
||||
- `flex-shrink` determines how much the items can shrink if necessary
|
||||
- Accepts a single positive number (unitless), default value is `1`
|
||||
- If the size of all flex items is larger than the flex container, items shrink to fit according to `flex-shrink`
|
||||
- `flex-basis` determines the initial size of a flex item before the remaining space is distributed
|
||||
- Can use any valid `width` value, intrinsic size values, `auto` (default) or `content`
|
||||
- `auto` means "look at my `width` or `height` property", whereas `content` is used for automatic sizing
|
||||
- `flex`: shorthand combining `flex-grow`, `flex-shrink` and `flex-basis`
|
||||
- Formal syntax: `flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]`
|
||||
- `align-self` allows the item to override the default `align-items` specified by the container
|
||||
- Valid values are the same as those of the `align-items` property in the container
|
||||
- `order` determines the ordering of the item
|
||||
- Accepts an integer value
|
||||
- Items in a container are sorted by ascending `order` value and then by their source code order
|
||||
- Might cause accessibility issues if used incorrectly
|
||||
17
snippets/css/s/perfect-transition-duration.md
Normal file
17
snippets/css/s/perfect-transition-duration.md
Normal file
@ -0,0 +1,17 @@
|
||||
---
|
||||
title: "Tip: The perfect duration for CSS transitions"
|
||||
shortTitle: CSS transition duration
|
||||
type: tip
|
||||
language: css
|
||||
tags: [interactivity,visual,animation]
|
||||
author: chalarangelo
|
||||
cover: perfect-timing
|
||||
excerpt: Learn how to make your CSS transitions feel perfect when users interact with elements on the page with this simple tip.
|
||||
dateModified: 2021-06-12T19:30:41+03:00
|
||||
---
|
||||
|
||||
We have all experienced a website interaction that feels sluggish or otherwise off on account of poor transition or animation duration and timing. However, there is a very simple "golden rule" to help you avoid this poor user experience, called **Doherty Threshold:**
|
||||
|
||||
> Productivity soars when a computer and its users interact at a pace (<400ms) that ensures that neither has to wait on the other.
|
||||
|
||||
The **magic number** of `0.4s` sounds like a very reasonable threshold, but take a look at any of your favorite websites and you'll notice that most `transition-duration` or `animation-duration` values are closer to `0.3s`. This might have something to do with our more recent expectation of what a fast interaction should feel like - after all the relevant research paper was published in 1982.
|
||||
62
snippets/css/s/typographic-scale-basics.md
Normal file
62
snippets/css/s/typographic-scale-basics.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
title: Typographic scale basics
|
||||
type: story
|
||||
language: css
|
||||
tags: [webdev,typography]
|
||||
author: chalarangelo
|
||||
cover: typography
|
||||
excerpt: Typography might seem intimidating, but you can quickly and easily create a simple typographic scale with this basic technique.
|
||||
dateModified: 2021-11-07T16:34:37+03:00
|
||||
---
|
||||
|
||||
Building a typographic scale might seem hard. Yet it's not all that difficult, as long as you learn some basic techniques and principles.
|
||||
|
||||
The first steps are to pick a **font family**, a starting value for the **font size** and a ratio which will serve as the **scaling factor**. Common values for these variables are the Roboto font family, a great choice due to its many different font weights, a starting font size of `18px` and a ratio of `1.618`, which is the golden ratio.
|
||||
|
||||
Based on these values, the basis of our typographic scale is an element with `font-size: 18px` and `line-height: 1.618`. Notice that the ratio is also applied to the line height. This allows the text to breathe a little more and makes it easier to read, while creating a consistent vertical rhythm.
|
||||
|
||||
Next, we are going to apply our ratio to **scale the font up or down**, as necessary. For example, we can multiply once by `1.618` for a sub heading, twice for a normal heading and three times for a large heading (e.g. our website's name on the home page). Similarly, we can scale the font down by dividing by our ratio to make elements less visually important (e.g. footnotes).
|
||||
|
||||
While this gives us a pretty solid setup, some elements might not look properly emphasized. To deal with this, we can use **font weight** to increase or decrease the visual importance of some elements. We could, for example, make headings bolder to make them more important. We could also make footnotes slightly bold to emphasize them as their font size is very small and they might get overlooked.
|
||||
|
||||
Putting it all together, we should end up with a typographic scale that looks similar to this:
|
||||
|
||||
|
||||
|
||||
```css
|
||||
:root {
|
||||
--font-family: 'Roboto', sans-serif;
|
||||
--font-size: 18px;
|
||||
--font-weight: 300;
|
||||
--line-height: 1.618;
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: var(--font-family);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.sub-heading {
|
||||
--font-size: 1.618rem;
|
||||
--font-weight: 600;
|
||||
}
|
||||
|
||||
.heading {
|
||||
--font-size: 2.618rem;
|
||||
--font-weight: 400;
|
||||
}
|
||||
|
||||
.large-heading {
|
||||
--font-size: 4.236rem;
|
||||
--font-weight: 500;
|
||||
}
|
||||
|
||||
.footnote {
|
||||
--font-size: 0.618rem;
|
||||
--font-weight: 500;
|
||||
}
|
||||
```
|
||||
|
||||
The above example is a very simple starting point to build your own typographic scale, applying some simple principles to create a visual hierarchy that feels natural and works well. Feel free to tweak the starting values of the variables and experiment to get the best result for your designs.
|
||||
Reference in New Issue
Block a user