 |
 |
Mavzu: CSS haqida
So'rov natijasi
Mavzu yoqdimi
Xa (9)
Menga farqi yöq (2)
Yöq (1)
Bilmadim (1)
197. MasterOS
(1420) [off]
| TXT |
29| 13 Dec 2018, 23:31
RM_FANAT, css dan yoki htmlni ozidan bu xato
(1420) [off]
| TXT | 29| 13 Dec 2018, 23:31
RM_FANAT, css dan yoki htmlni ozidan bu xato
198. b33qwerty (13) [off]
| TXT | 29| 14 Dec 2018, 00:03
Css juda ajoyib tilda. Maza qilib ishlaysiz. Busiz dizaynlashtirish juda qiyin bo'lar edi. O'zim avval htmlda dizayn tuzar edim. Juda qiyin edi. Css bilan esa juda oson hal qilinar ekan
29| 14 Dec 2018, 00:03
Css juda ajoyib tilda. Maza qilib ishlaysiz. Busiz dizaynlashtirish juda qiyin bo'lar edi. O'zim avval htmlda dizayn tuzar edim. Juda qiyin edi. Css bilan esa juda oson hal qilinar ekanIjobiy (1):
fokuschi,
199. MasterOS (1420) [off]
| TXT | 27| 14 Dec 2018, 13:33
Yangi yil archasi chistiy html va css yordamida:
<!DOCTYPE html><htmllang="ru">
<head>
<meta charset="utf-8"/><title>Archa</title>
<style>
* {
margin:0;padding:0;
}
body{
background-color:#eee;
color:#fff;
font:14px/1.3Arial,sans-serif;
}
header{
background-color:#212121;
box-shadow:0-1px 2px #111111; display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 00110px;
position:absolute;
top:0;
}
header.stutsspan{
font-size:22px;
font-weight:bold;
margin-left:5px;
}
/* стили основной области */
.container{
height:500px;
margin:50px auto;
overflow:hidden;
position:relative;
width:800px;
background-color:#0093d8;
background:-moz-linear-gradient(top,#0093d8,#fff);
background:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#fff),color-stop(1,#0093d8));-moz-box-shadow:010px 10px rgba(0,0,0,0.5);-webkit-box-shadow:010 px 10px rgba(0,0,0,0.5);box-shadow:010px 10px rgba(0,0,0,0.5);}
/* стили снега внизу */
.bottom_snow{
position:absolute;z-index:5;top:400px;left:50%;margin-left:-500px;width:1000px;height:1000px;background:#e2e2e2;border-radius:1000px;-moz-border-radius:1000px;-webkit-border-radius:1000px;}.bottom_snow:before,.bottom_snow:after{background-color:#fff;content:"";height:1000px;position:absolute;top:-25px;width:1000px;border-radius:1000px;-moz-border-radius:1000px;-webkit-border-radius:1000px;}.bottom_snow:before{left:400px;}.bottom_snow:after{right:400px;}
/* стили надписи */h1{color:#FAFAFA;font:bold 80px'Comic Sans MS',Arial;text-align:center;text-shadow:2px 2px 1px rgba(0,0,0,0.85),4px 4px 0 #CFEAED;text-transform:uppercase;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
/* стили для елки */.tree,.tree:before,.tree:after,.tree_bot,.tree_bot:before,.tree_bot:after{height:0;position:absolute;width:0;border-radius:40px;-moz-border-radius:40px;-webkit-border-radius:40px;}.tree{border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid green;left:390px;top:135px;}.tree:before{content:'';border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:40px solid green;left:-40px;top:15px;}.tree:after{content:'';border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:60px solid green;left:-60px;top:40px;}
/* елка, нижняя часть */
.tree_bot{border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:80px solid green;left:330px;top:210px;}.tree_bot:before{content:'';border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:100px solid green;left:-100px;top:40px;}.tree_bot:after{content:'';border-left:120px solid transparent;border-right:120px solid transparent;border-bottom:120px solid green;left:-120px;top:80px;}
/* стили для шариков */.ball{height:40px;left:390px;position:absolute;top:345px;width:40px;border-radius:40px;-moz-border-radius:40px;-webkit-border-radius:40px;box-shadow:005px#777;-moz-box-shadow:005px#777;-webkit-box-shadow:005px#777;}.red{background-color:#c8171f;background-image:-webkit-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:-moz-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:-o-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);left:340px;top:325px;}.blue{background-color:#00a1ee;background-image:-webkit-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:-moz-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:-o-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);}.green{background-color:#4d8d00;background-image:-webkit-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:-moz-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:-o-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);left:440px;top:325px;}.rsmall,.gsmall,.bsmall{height:25px;width:25px;}.rsmall{left:440px;top:255px;}.bsmall{left:350px;top:255px;}.gsmall{left:395px;top:275px;}
/* стили для падающего снега */.fall_snow{background-image:url('../images/snow1.png'),url('../images/snow2.png'),url('../images/snow3.png');height:100%;left:0;position:absolute;top:0;width:100%;-webkit-animation:snow 10s linear infinite;-moz-animation:snow 10s linear infinite;-ms-animation:snow 10s linear infinite;animation:snow 10s linear infinite;}@keyframes snow {0%{background-position:0px 0px,0px0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}@-moz-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:400px 1000px,200px 400px,100px 300px;}}@-webkit-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}@-ms-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}
</style>
</head>
<body>
<header>
</header>
<div class="container">
<div class="bottom_snow"></div>
<div class="tree"></div>
<div class="tree_bot"></div>
<div class="ball red"></div>
<div class="ball green"></div>
<div class="ball blue"></div>
<div class="ball red rsmall"></div>
<div class="ball green gsmall"></div>
<div class="ball blue bsmall"></div>
<h1>Yangi yil bilan!</h1>
<div class="fall_snow"></div>
</div>
</body>
</html>
(1420) [off]
| TXT | 27| 14 Dec 2018, 13:33
Yangi yil archasi chistiy html va css yordamida:<!DOCTYPE html><htmllang="ru">
<head>
<meta charset="utf-8"/><title>Archa</title>
<style>
* {
margin:0;padding:0;
}
body{
background-color:#eee;
color:#fff;
font:14px/1.3Arial,sans-serif;
}
header{
background-color:#212121;
box-shadow:0-1px 2px #111111; display:block;
height:70px;
position:relative;
width:100%;
z-index:100;
}
header h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px0;
position:absolute;
width:540px;
}
header a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 00110px;
position:absolute;
top:0;
}
header.stutsspan{
font-size:22px;
font-weight:bold;
margin-left:5px;
}
/* стили основной области */
.container{
height:500px;
margin:50px auto;
overflow:hidden;
position:relative;
width:800px;
background-color:#0093d8;
background:-moz-linear-gradient(top,#0093d8,#fff);
background:-webkit-gradient(linear,leftbottom,lefttop,color-stop(0,#fff),color-stop(1,#0093d8));-moz-box-shadow:010px 10px rgba(0,0,0,0.5);-webkit-box-shadow:010 px 10px rgba(0,0,0,0.5);box-shadow:010px 10px rgba(0,0,0,0.5);}
/* стили снега внизу */
.bottom_snow{
position:absolute;z-index:5;top:400px;left:50%;margin-left:-500px;width:1000px;height:1000px;background:#e2e2e2;border-radius:1000px;-moz-border-radius:1000px;-webkit-border-radius:1000px;}.bottom_snow:before,.bottom_snow:after{background-color:#fff;content:"";height:1000px;position:absolute;top:-25px;width:1000px;border-radius:1000px;-moz-border-radius:1000px;-webkit-border-radius:1000px;}.bottom_snow:before{left:400px;}.bottom_snow:after{right:400px;}
/* стили надписи */h1{color:#FAFAFA;font:bold 80px'Comic Sans MS',Arial;text-align:center;text-shadow:2px 2px 1px rgba(0,0,0,0.85),4px 4px 0 #CFEAED;text-transform:uppercase;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none;}
/* стили для елки */.tree,.tree:before,.tree:after,.tree_bot,.tree_bot:before,.tree_bot:after{height:0;position:absolute;width:0;border-radius:40px;-moz-border-radius:40px;-webkit-border-radius:40px;}.tree{border-left:20px solid transparent;border-right:20px solid transparent;border-bottom:20px solid green;left:390px;top:135px;}.tree:before{content:'';border-left:40px solid transparent;border-right:40px solid transparent;border-bottom:40px solid green;left:-40px;top:15px;}.tree:after{content:'';border-left:60px solid transparent;border-right:60px solid transparent;border-bottom:60px solid green;left:-60px;top:40px;}
/* елка, нижняя часть */
.tree_bot{border-left:80px solid transparent;border-right:80px solid transparent;border-bottom:80px solid green;left:330px;top:210px;}.tree_bot:before{content:'';border-left:100px solid transparent;border-right:100px solid transparent;border-bottom:100px solid green;left:-100px;top:40px;}.tree_bot:after{content:'';border-left:120px solid transparent;border-right:120px solid transparent;border-bottom:120px solid green;left:-120px;top:80px;}
/* стили для шариков */.ball{height:40px;left:390px;position:absolute;top:345px;width:40px;border-radius:40px;-moz-border-radius:40px;-webkit-border-radius:40px;box-shadow:005px#777;-moz-box-shadow:005px#777;-webkit-box-shadow:005px#777;}.red{background-color:#c8171f;background-image:-webkit-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:-moz-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:-o-radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);background-image:radial-gradient(50%50%,circle,#f9d0be,#c8171f70%);left:340px;top:325px;}.blue{background-color:#00a1ee;background-image:-webkit-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:-moz-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:-o-radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);background-image:radial-gradient(50%50%,circle,#cde6f9,#00a1ee70%);}.green{background-color:#4d8d00;background-image:-webkit-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:-moz-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:-o-radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);background-image:radial-gradient(50%50%,circle,#d1e5b2,#4d8d0070%);left:440px;top:325px;}.rsmall,.gsmall,.bsmall{height:25px;width:25px;}.rsmall{left:440px;top:255px;}.bsmall{left:350px;top:255px;}.gsmall{left:395px;top:275px;}
/* стили для падающего снега */.fall_snow{background-image:url('../images/snow1.png'),url('../images/snow2.png'),url('../images/snow3.png');height:100%;left:0;position:absolute;top:0;width:100%;-webkit-animation:snow 10s linear infinite;-moz-animation:snow 10s linear infinite;-ms-animation:snow 10s linear infinite;animation:snow 10s linear infinite;}@keyframes snow {0%{background-position:0px 0px,0px0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}@-moz-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:400px 1000px,200px 400px,100px 300px;}}@-webkit-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}@-ms-keyframes snow {0%{background-position:0px 0px,0px 0px,0px 0px;}50%{background-position:500px 500px,100px 200px,-100px 150px;}100%{background-position:500px 1000px,200px 400px,-100px 300px;}}
</style>
</head>
<body>
<header>
</header>
<div class="container">
<div class="bottom_snow"></div>
<div class="tree"></div>
<div class="tree_bot"></div>
<div class="ball red"></div>
<div class="ball green"></div>
<div class="ball blue"></div>
<div class="ball red rsmall"></div>
<div class="ball green gsmall"></div>
<div class="ball blue bsmall"></div>
<h1>Yangi yil bilan!</h1>
<div class="fall_snow"></div>
</div>
</body>
</html>
200. RM_FANAT (1035) [off]
| TXT | 27| 14 Dec 2018, 15:46
MasterOS, Namuna bering, biron bir saytga ornatilganmi?
(1035) [off]
| TXT | 27| 14 Dec 2018, 15:46
MasterOS, Namuna bering, biron bir saytga ornatilganmi?
201. MasterOS (1420) [off]
| TXT | 29| 14 Dec 2018, 15:47
RM_FANAT, Nima namuna buni kopirovat qilib hello.html fayli yaratib ichiga qoyib brauzerda ochib koring.Kecha rasmini ham tashadimku chatda.
(1420) [off]
| TXT | 29| 14 Dec 2018, 15:47
RM_FANAT, Nima namuna buni kopirovat qilib hello.html fayli yaratib ichiga qoyib brauzerda ochib koring.Kecha rasmini ham tashadimku chatda.
202. MasterOS (1420) [off]
| TXT | 27| 14 Dec 2018, 16:37
Animatsiyali Css3 va html menyu
AnimationMenu.zip
Yuklangan: 168 marta (85.16KB)
(1420) [off]
| TXT | 27| 14 Dec 2018, 16:37
Animatsiyali Css3 va html menyuAnimationMenu.zip
Yuklangan: 168 marta (85.16KB)
Ijobiy (1):
fokuschi,
203. MasterOS (1420) [off]
| TXT | 26| 14 Dec 2018, 18:20
Mana archa html va css ozidan.Hech qanday rasm va boshqa narsa yoq.
Avtor men emas.
Prosta buni .html faylga joylashtirib, keraksiz joylarini ochirib, ozgartirib yaxshiladim.
ёлки-палки.html.zip
Yuklangan: 48 marta (1.73KB)
(1420) [off]
| TXT | 26| 14 Dec 2018, 18:20
Mana archa html va css ozidan.Hech qanday rasm va boshqa narsa yoq.Avtor men emas.
Prosta buni .html faylga joylashtirib, keraksiz joylarini ochirib, ozgartirib yaxshiladim.
ёлки-палки.html.zip
Yuklangan: 48 marta (1.73KB)
Oxirgi o'zgarish: MasterOS (14 Dec 2018, 18:21)
Ijobiy (1):
fokuschi,
Onlayn 181 (0/181)
Forumga a'zo bo'lish
Forumdan qidirish
Bosh sahifa