6hr Css Course -


Lorem

lorem text image

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio tenetur debitis soluta itaque earum voluptatem, sunt saepe id consequatur inventore incidunt animi officia quod excepturi cupiditate quae beatae reiciendis ipsa dignissimos laborum voluptas. Debitis velit cupiditate, earum nobis ducimus est perferendis commodi nostrum tempore sequi, harum aliquid, tenetur reprehenderit. Officiis voluptate repudiandae velit adipisci facere magnam itaque beatae id similique.

  1. hi
  2. hello
  3. wasap
  4. bonjour
I will change color.(blue=link yellow=visited)

Next Header

  • ali
  • alireza
  • alizade

  • lilipedia

Because my next line is a paragraph, we are red! (متن دقیق تری قبلا توصیفش کرده)

Hello i'm red!

  1. one
  2. two
    • 2/5
    • 2.7
    • 2.9
  3. three
mona lisa img














My font is 2em.

My font is 2vh.

My font is 2vw.




Mn link hastam vali khat ziram nis



auto capitalizer / justify / khat zir :

Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis laudantium laboriosam omnis quae illo neque magnam minima! Labore pariatur, dolores sunt harum earum qui illo totam? Unde, expedita illum quidem autem possimus, quo nostrum molestias sunt iusto consequuntur debitis impedit.

Center Text:

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint totam necessitatibus at veritatis fuga delectus a doloremque. Assumenda, inventore officia.




font-style: italic;

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo eveniet ipsa qui tempora corporis facere nostrum. A dicta quas exercitationem ea quis est officiis magni facere, molestias deleniti veritatis magnam!




Custom Fonts - span

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ex, incidunt animi, tempore quibusdam quo sed fuga suscipit perferendis excepturi natus omnis sapiente aspernatur debitis! Ipsum, voluptates. Exercitationem consequuntur doloribus quia.



cute bat

Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro perspiciatis perferendis autem ut sunt voluptatem quod doloremque ratione. Et delectus quis nihil modi, cumque maxime consectetur dolorum nostrum officia iusto.












display : inline-block

Lorem ipsum dolor sit amet consectetur adipisicing elit.

Lorem ipsum dolor sit amet consectetur adipisicing elit.


A
B
C
D
E



Grid:

A
B
C
D
E


Submit

hover me!



transform: translate


transform: scale


transform: rotate


transform: skewX


transform: skewY


transform: matrix



animation


gradient animation


cheese!




calc(100vh - 72px)

text-indent: 50px

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit incidunt aliquid non esse a deleniti cupiditate ipsa. Earum, voluptatem ratione quos sunt odio deserunt autem adipisci, maiores et velit accusamus, ad numquam? Facere, eos? Consequuntur laboriosam quisquam consequatur. Asperiores eligendi tenetur, quis placeat eum consequuntur ex quod esse. Perferendis, odit?



div is block element

h3 is block element

p is block element

span is inline element a is inline element


you can change display value:

div is block element

h3 is block element

p is block element

span is inline element a is inline element




with box-sizing without box-sizing


opacity:0.75

opacity:0.25

opacity:0

visibility:hidden



small img - default
small img - repeat only x
small img - repeat space
small img - repeat round
large img - cover - no repeat
small img - no repeat - position
small img - no repeat - position 20% 80%
large img - repeat space - position center
large img - repeat space - position center - attachment
can you see my text?
can you see my text?

ColorZilla:




kwute cat kwute cat

<- float ->

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi veritatis omnis libero? Amet quidem quos qui, repellat, impedit doloremque itaque vero accusantium ratione nemo nulla? Sunt dolor eveniet vitae facilis quidem. Exercitationem quam quaerat pariatur eum similique distinctio optio ut. Repudiandae temporibus dicta quia nesciunt atque voluptate fugit odit quam?

big img

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore saepe, consectetur esse blanditiis dolore laudantium alias amet velit quae adipisci!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore saepe, consectetur esse blanditiis dolore laudantium alias amet velit quae adipisci! position relative and absolute

My font grows with the size of the page.

nature eiffel lisa w11 cat


Lorem ipsum dolor sit amet.

apex
apex
apex

::first-line & ::first-letter

Lorem, ipsum dolor sit amet consectetur adipisicing elit. In dolores optio eos assumenda quidem magnam possimus fugiat! Est iusto non ipsum tempora quibusdam molestias quo iste nostrum! At, aliquam inventore?

:link -> :active -> :visited

ease

linear

ease-in

ease-out

ease-in-out

animation-fill-mode

Font Awesome

var()

text and box shadow:

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Iste, quis! Tempora eligendi adipisci minus sint accusantium. Voluptate ullam natus ad voluptatem nesciunt vel error? Autem doloremque voluptas nesciunt itaque id?

Text-Shadow-Generator Box-Shadow-Generator
Emmet
Code
p.class1#id1{hello!}
<p class="class1" id="id1">hello!<p>
#ali.div-is-cool.ajr>.div-in-div
<div id="ali" class="div-is-cool ajr"> <div id="div-in-div"> </div> </div>
.two-div>.sub-div*2{$}
<div class="two-div"> <div class="sub-div">1 </div> <div class="sub-div">2 </div> </div>
ul.main-ul>li*2.ul-cell{$}
<ul class="main-ul"> <li class="ul-cell">1 </li> <li class="ul-cell">2 </li> </ul>


top:50%
left:50%
translateX(-50%)
translateY(-50%)












you can use border like this!

Hello im mirrored!

text decoration: underline overline orange double 2px;

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ratione asperiores tenetur accusamus quis! Saepe reprehenderit aut eaque veritatis, dolorem aspernatur.

Lorem ipsum dolor sit amet consectetur adipisicing ...

font: italic small-caps bold 12px/30px Georgia, serif;


auto
crosshair
default
alias
all-scroll
cell
copy
none
help
grab
grabbing
n-resize
e-resize
ne-resize
nw-resize
not-allowed
pointer
progress
row-resize
text
vertical-text
wait
zoom-in
zoom-out
  • Lorem
  • ipsum
  • dolor
  • sit
name age salary
sara 22 130$
ali 80 700$
dana 11 13$
navid 45 123$
lorem 63 400$
reza 4 987$
zahra 20 0.93$
charlie 28 55000$
round img
don't press the button!

position: sticky;

max-width: 500px;

width: 500px;

overflow: scroll; scroll-imgLorem ipsum dolor sit amet consectetur adipisicing elit. Enim eaque reprehenderit aperiam minima. Pariatur aliquid quisquam architecto explicabo quam veniam, rerum nihil id placeat deleniti accusantium. Ipsa culpa molestias modi!

overflow-y: scroll; overflow-x: hidden; scroll-imgLorem ipsum dolor sit amet consectetur adipisicing elit. Enim eaque reprehenderit aperiam minima. Pariatur aliquid quisquam architecto explicabo quam veniam, rerum nihil id placeat deleniti accusantium. Ipsa culpa molestias modi!

display: inline;

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem animi, placeat cumque rem aut sequiinventore temporibus dolor dolores suscipit.

display: block;

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem animi, placeat cumque rem aut sequiinventore temporibus dolor dolores suscipit.

display: inline-block;

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Exercitationem animi, placeat cumque rem aut sequiinventore temporibus dolor dolores suscipit.

you can change selection!

  • you
  • can
  • change
  • all
  • ::marker
  • <==

:focus =>

  1. home
  2. news
  3. content
  4. about
Lorem ipsum dolor sit amet consectetur adipisicing elit. Maiores, doloribus. w11-background Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fuga alias ab quidem inventore dolorum. Architecto, excepturi accusamus ducimus exercitationem error eaque hic rerum saepe ab illo similique, iusto repellendus deserunt aliquam eum tempora ipsum perspiciatis sint. Magnam saepe id ea, impedit excepturi dignissimos nostrum velit! Quibusdam labore eius, velit fugit optio beatae at omnis sequi maiores repellendus voluptas. Incidunt, ullam quas delectus in magnam voluptatem reiciendis quasi nulla deleniti maxime doloremque harum, esse rem, molestiae earum doloribus voluptatibus. Quam eum aliquam quidem iure, neque nobis ipsa voluptates tempora sequi sunt fugiat quasi amet eveniet consectetur. Repellat qui debitis pariatur natus.
  1. home
  2. news
  3. content
  4. dropdown
    link 1 link 2 link 3

it doesn't work :((

link

hover over me!

hello!
  1. home
  2. news
  3. content
    4. dropdown
    link 1 link 2 link 2
eiffel
eiffel
bigger image!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum minus optio ratione suscipit accusamus distinctio aperiam delectus. Vero labore illo temporibus dolorem sed tempora totam porro nemo soluta laboriosam. Ea dolor atque quasi enim earum iure minus laborum consequuntur dolorum quo numquam non tempore, quia maiores distinctio, aliquid est vel fugiat repellendus a at neque omnis minima. Maiores, magnam aperiam!

  1. random-img
    random image
  2. random-img
    random image
  3. random-img
    random image
  4. random-img
    random image
  5. random-img
    random image
  6. random-img
    random image
element specificity
* 0
p 1
.test 10
p.test 11
#test 100
p#test 101
p.test p#test 112
< p style="..." /> 1000
!important >1000
width: calc(100% - 100px);
width: max(50%, 300px);
width: min(50%, 300px);
max-width: 800px;
min-width: 500px;
border: 10px solid transparent;

border-image: url('/img/border-img.png') 30 round;
border-img
border-image: url('...')       round;
border-image: url('...') 30             ;
border-image: url('...') 20% round;

background: url("/img/border-img.png") 44% 23px
no-repeat,
url("/img/eiffel\ small.png") right no-repeat,
url("/img/Mona_Lisa.jpg") center/cover;

background: url('/img/Mona_Lisa.jpg') center/cover;
background-size: 224 => 15 ;

hello, im in center of the image!

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

The colors of my parts are connected

color: blueviolet;
border: 4px solid currentColor;
outline: 2px solid currentColor;
text-shadow: 0 0 5px currentColor;
box-shadow: 5px 5px 15px currentColor;

Hover to change my color to transparent

color: transparent;
border: 4px solid transparent;
outline: 2px solid transparent;
text-shadow: 0 0 5px transparent;
box-shadow: 5px 5px 15px transparent;

repeating-linear-gradient(45deg,red 5%,
blue 10%,green 15%);

repeating-radial-gradient(circle,45deg,red 10%,
blue 15%,green 20%);

You can combine text-shadow in css!

text-shadow: 1px 1px 2px black,0 0 10px yellow,
0 0 5px blue;

Border around text!

text-shadow: -1px 0 black, 1px 0 black, 0 1px black, 0 -1px black;

box-shadow: inset 10px 10px 15px black;

Hover me! Cool Arrow!

nature

filter: blur(10px);

 nature

filter: brightness(250%);

 nature

filter: contrast(200%);

 nature

filter: grayscale(200%);

 nature

hue-rotate(180deg);

 nature

filter: invert(100%);

 nature

filter: saturate(5);

 nature

filter: sepia(100%);
Lorem ipsum, dolor sit amet consectetur adipisicing elit.

white-space: nowrap;
Find me !
Mona_Lisa Join Me
nature

-webkit-box-reflect: below 0px linear-gradient(to bottom, rgba(0,0,0,0.0), rgba(0,0,0,0.4));

transform: scaleX(-1);

text-overflow: clip: Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, incidunt? text-overflow: ellipsis: Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati, incidunt?
1
2
3
4
5

display: flex;

1
2
3
4
5

flex-direction: row-reverse;

1
2
3
4
5

flex-direction: column;

1
2
3
4
5

flex-direction: column-reverse;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

flex-wrap: wrap;

1
2
3
4
5
6

justify-content: space-between;

1
2
3
4
5
6

justify-content: space-around;

1
2
3
4
5
6

justify-content: center;

1
2
3
4
5
6

display: flex-end;


IRAN AZAD

<video src="img2/IRAN AZAD(0.8).mp4" controls autoplay muted>

<audio src="img2/Baraaye.mp3" controls autoplay muted>