لیست کدهای آماده CSS
مجموعه کدهای آماده و کاربردی CSS: وسطچین، انیمیشن، سایه، گرد کردن و ترفندهای روز.
رایگان و بدون ثبتنام
اجرای فوری در مرورگر
میانگین — از ۵ (۰ رأی)
✦ CSS Cheat Sheet ✦
Interactive reference for CSS developers
Basics
Syntax
Basic CSS syntax and how to include styles
selector { property: value; property2: value2; }
External CSS file
<linkrel="stylesheet"href="style.css">
Internal styles
<style> div { color: #444; } </style>
Inline styles
<tagstyle="property: value">
Box Model
.box { margin: 10px; border: 2px solid #333; padding: 15px; width: 200px; }
Clearfix
.clearfix::after { content: ""; display: block; clear: both; visibility: hidden; height: 0; } .clearfix { display: block; }
Selectors
CSS3
Basic selectors
*all elements
divall divs
div pp inside div
div > pdirect child
div + padjacent sibling
div ~ pgeneral sibling
.classclass name
#idID name
div.classdiv with class
div#iddiv with ID
Pseudo-classes
a:hovermouse over
a:activeclicked
a:visitedvisited link
p:first-childfirst child
p:last-childlast child
p:nth-child(2)nth child
p:nth-of-type(2)nth of type
p:first-of-typefirst of type
p:last-of-typelast of type
p:only-childonly child
p:only-of-typeonly of type
input:focushas focus
input:checkedchecked
input:disableddisabled
input:enabledenabled
input:validvalid value
input:invalidinvalid value
input:requiredrequired attribute
input:optionaloptional
div:emptyno children
:not(span)not span
:rootroot element
::selectionselected text
p::beforebefore element
p::afterafter element
p::first-letterfirst letter
p::first-linefirst line
:targettarget anchor
Attribute selectors
a[target]has target attr
[class^="box"]starts with
[class$="box"]ends with
[class*="box"]contains
[class~="box"]contains word
[class|="box"]starts with word
Color Picker
Interactive
Flexbox Generator
Layout
Configure flex container properties
6px
1
2
3
4
5
display: flex; flex-direction: row; justify-content: flex-start; align-items: stretch;
Grid Generator
Layout
Configure CSS Grid container
6px
1
2
3
4
5
6
display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px;
Filter Effects
Visual
Apply CSS filter effects to elements
0px
100%
100%
0%
0deg
0%
100%
0%
filter: blur(0px) brightness(100%) contrast(100%);
Transition Generator
Animation
Create smooth CSS transitions
0.5s
0s
Hover me
transition: all 0.5s ease 0s;
Table Generator
Tables
Style HTML tables
2px
| Name | Age | City |
|---|---|---|
| John | 25 | NYC |
| Jane | 30 | LA |
border-collapse: collapse; border-spacing: 2px; caption-side: top; table-layout: auto;
Positioning Generator
Layout
Control element positioning
0px
0px
0px
0px
Box
position: static; top: 0px; right: 0px; bottom: 0px; left: 0px; z-index: 0;
Cursor Generator
Interaction
Set cursor style for interactive elements
Hover here to see cursor
cursor: pointerclickable
cursor: not-alloweddisabled
cursor: grabdraggable
cursor: zoom-inmagnify
cursor: default;
Outline Generator
Border
Style outlines (different from border)
3px
0px
Outline preview
outline: 3px solid #e65100; outline-offset: 0px;
Border Generator
Border
Style element borders
3px
Border preview
border: 3px solid #e65100;
Border Radius
Corners
Round element corners individually
Preview
border-radius: 0px;
Box Shadow
Shadow
Add shadows to elements
5px
8px
12px
0px
30%
Shadow preview
box-shadow: 5px 8px 12px 0px rgba(0,0,0,0.3);
Text Shadow
Shadow
Add shadows to text
2px
3px
5px
Text Shadow
text-shadow: 2px 3px 5px #e65100;
Font Generator
Typography
Style text with font properties
20px
Sample Text
font-family: Georgia, serif; font-size: 20px; color: #333333;
Transform Generator
3D
Rotate, scale, translate and skew elements
0deg
1x
0px
0px
0deg
0deg
Element
transform: rotate(0deg) scale(1) translate(0px, 0px) skewX(0deg) skewY(0deg);
Media Queries
Responsive
Write responsive CSS with media queries
@mediascreenand (max-width: 768px) { .container { flex-direction: column; padding: 10px; } } @mediascreenand (min-width: 769px) and (max-width: 1024px) { .container { max-width: 960px; } } @mediaprint { .no-print { display: none; } } @media (prefers-color-scheme: dark) { body { background: #0a0a0a; color: #e0e0e0; } } @media (orientation: landscape) { .sidebar { width: 30%; } }
Common media features
widthviewport width
heightviewport height
orientationportrait/landscape
resolutiondevice resolution
aspect-ratiowidth/height ratio
prefers-color-schemedark/light mode
prefers-reduced-motionanimation preference
Media types
allall devices
printprinters
screenscreens
speechscreen readers
Reset CSS
Base
Reset default browser styles
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: Arial, sans-serif; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 1rem; } ul, ol { list-style: none; } a { text-decoration: none; color: inherit; } img, video { max-width: 100%; display: block; } table { border-collapse: collapse; border-spacing: 0; } button, input, select, textarea { font-family: inherit; font-size: inherit; border: none; outline: none; } blockquote, q { quotes: none; } blockquote::before, blockquote::after, q::before, q::after { content: ""; }
Properties
Reference
Common CSS properties with descriptions
backgroundall background properties
background-colorbackground color
background-imagebackground image
background-positionimage position
background-repeatimage repeat
background-sizeimage size
borderall border properties
border-radiusrounded corners
box-shadowelement shadow
colortext color
displaybox display type
flexflex item properties
flex-directionflex direction
flex-wrapflex wrap
fontall font properties
font-familyfont family
font-sizefont size
font-weightfont weight
heightelement height
justify-contentflex justify
line-heightline height
marginoutside spacing
opacitytransparency
outlineouter border
overflowcontent overflow
paddinginside spacing
positionpositioning type
text-aligntext alignment
text-decorationtext decoration
text-shadowtext shadow
transform2D/3D transform
transitionsmooth transitions
widthelement width
z-indexstack order
px ↔ em Converter
Units
Convert between px and em units
px
px = 1.5em
em = 24px
Formula: em = px / parent px