Quick Tip: Practical CSS Shapes

preview_player
Показать описание
A common design technique lately is to create a fold effect, where it appears that a heading is folding behind its container. This is generally achieved through the use of tiny images; however, with CSS, we can mimic this effect quite easily. Ill show you how in four minutes.
  1. Tuts+ Code
  2. nettuts
  3. screencast
  4. web design
  5. web development
  6. css
Рекомендации по теме
Quick Tip: Practical 0:04:17

Quick Tip: Practical CSS Shapes

CSS Shapes & 0:27:27

CSS Shapes & Friends: upgrade your page layouts

CSS Tutorial: Parallelogram 0:00:33

CSS Tutorial: Parallelogram Shape #html #css #tutorial #shape #parallelogram

Explore Creative Visual 0:00:59

Explore Creative Visual Effects using CSS Mix-Blend-Mode ✨

CSS Wavy Shape 0:01:00

CSS Wavy Shape Tutorial 🌊 Quick Web Design Tip #css #webdevelopment #frontenddevelopment #html

How to make 0:18:35

How to make shapes with CSS

Learn CSS Border 0:05:57

Learn CSS Border Animations in 6 Minutes

CSS Flexbox in 0:01:44

CSS Flexbox in 100 Seconds

CSS transform skew 0:00:13

CSS transform skew

CSS Tutorial: Rhombus 0:00:30

CSS Tutorial: Rhombus Shape #html #css #tutorial #shape #rhombus

CSS Shapes Editor 0:01:56

CSS Shapes Editor Web Tool

Master Media Queries 0:09:44

Master Media Queries And Responsive CSS Web Design Like a Chameleon!

Quick Tip: Pure 0:04:25

Quick Tip: Pure CSS Text Gradients

CSS Tip: @counter-style 0:00:21

CSS Tip: @counter-style - custom counter styling for list items | #CSS #webdevelopment #CSStips

Amazing Rotating Python 0:00:17

Amazing Rotating Python Graphics Design using Turtle 🐢 #python #pythonshorts #coding #viral #design...

CSS Shapes: Creating 0:11:34

CSS Shapes: Creating Diamond Shape in CSS

Comment yes for 0:00:22

Comment yes for more body language videos! #selfhelp #personaldevelopment #selfimprovement

Doctor's Handwritings || 0:00:15

Doctor's Handwritings || Amusing Handwriting ||

Thinking Outside the 0:08:00

Thinking Outside the Box with CSS Shapes

His laptop died 0:00:42

His laptop died so he used his TYPEWRITER. 😭🤷‍♂️ #shorts

CSS Tutorial: Star 0:00:39

CSS Tutorial: Star Shape #html #css #tutorial #shape #star

Coding for 1 0:00:24

Coding for 1 Month Versus 1 Year #shorts #coding

Learn CSS BOX 0:17:45

Learn CSS BOX MODEL - With Real World Examples

Quick Tip: Drawing 0:10:12

Quick Tip: Drawing and Using CSS Triangles

Комментарии
Автор

One of the best videos of all time. Granted I had to pause to keep up with the coding various times, but it was great. Thanks so much for making this!

MarcusCamden
Автор

Excellent tutorial. Thank you for the help.

DsHacker
Автор

Thanks. Very clear presentation. Awesome.

mayaahmed
Автор

Really Great! I just started to know more about CSS!

AkbarHossainbigpsfan
Автор

very useful, quick, easy, great result

Cristy
Автор

nice, thx! witch firefox addon you use to edit the code? norman from germany

nekst
Автор

What program are you using to edit? Live rendering looks very helpful

dmcg
Автор

Awesome tutorial! Trying to use in a wordpress theme but can't get the .arrow to show. Please help.

MrJimmyBlaze
Автор

Perfect example of IE stupidity.

P.S.
Great tip Jeff. Thank you!

petsoukos
Автор

The question is: What is the end result of this?

If you run the stats, you'll find you wasted bandwidth, you wasted valuable (vertical) space on the screen, and you lowered CTR to more important items on the page that deserve more attention. Also now you created for yourself a real problem with "if IE"--now you have something that breaks when MS fixes their browser.

That said, I agree it's better to use code in place of bitmaps, depending on the application.

ferodynamics
Автор

Awesome tutorial! Trying to use in a wordpress theme but can't get the .arrow to show. Please help. tressexpert website

MrJimmyBlaze