Миний блог сайт: October 2023

Monday, October 30, 2023

CSS3, жишээ

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Untitled Document</title>

</head>

<style>

div { /* мужийн хэлбэр тодорхойлох */

width: 50px; /* мужийн өргөн */

height: 50px; /* мужийн өндөр */

background: #FF0000; /* мужийн өнгө */

transition-property: width; /* шилжилтийн өөрчлөх шинж чанар */

transition-duration: 3s; /* шилжилтийн үргэлжлэх хугацаа */

transition-timing-function: linear; /* шилжилтийн хурдатгалын төрөл */

transition-delay: 0s;} /* шилжилт эхлэх хугацаа */

div:hover { /* хулгана дээр нь очих үеийн хэлбэр тодорхойлох */

width: 300px;} /* өргөн */

</style>

<body>

</body>

</html>

CSS3, текстийн сүүдэр, жишээ

<head>

<title>Untitled Document</title>

<style>

a { /* холбоост текстийн хэлбэр тодорхойлох */

color: #0000ff; /* текстийн үндсэн өнгө */

font-family: Arial; /* текстийн фонт */

font-size: 50px; /* текстийн хэмжээ */

transition: 0.5s all ease; /* шилжилт үргэлжлэх хугацаа, хэлбэр */

text-decoration: none; /* доогуур зураас */

text-shadow: /* текстийн сүүдэр */

1px 1px #61b4de, 2px 2px #91c467, 3px 3px #f3a14b, 4px 4px #e84c50, 5px 5px #4e5965;

}

a:hover { /* хулгана байрлах үеийн хэлбэр тодорхойлох */

color: #0a0a0a; /* текстийн үндсэн өнгө */

text-shadow: /* текстийн сүүдэр */

1px 1px #61b4de, 2px 2px #61b4de, 3px 3px #61b4de, 4px 4px #61b4de, 5px 5px #61b4de, 6px 6px #91c467, 7px 7px #91c467, 8px 8px #91c467, 9px 9px #91c467, 10px 10px #91c467, 11px 11px #f3a14b, 12px 12px #f3a14b, 13px 13px #f3a14b, 14px 14px #f3a14b, 15px 15px #f3a14b, 16px 16px #e84c50, 17px 17px #e84c50, 18px 18px #e84c50, 19px 19px #e84c50, 20px 20px #e84c50, 21px 21px #4e5965, 22px 22px #4e5965, 23px 23px #4e5965, 24px 24px #4e5965, 25px 25px #4e5965;

}

</style>

</head>

<body>

<a href="#"> ХОЛБООСТ ТЕКСТИЙН СҮҮДЭР </a>

</body>

</html>

CSS3, transition жишээ

<html>

<head>
<title>All</title>
<style>
body {font-family: arial; margin: 0; text-align: center}
div, img {
transition: 1s ease-in-out;
}
.one, .two, .three {
border: 5px solid transparent;
width: 200px;
height: 100px;
margin: 0 auto;
padding: 10px;
}
.one {
background-color: #B0CBC4;
}
.one:hover {
border: #0000FF;
background-color: #FF0000;
border-radius:50%;
}
.two {
background-color: #9F908F;

}
.two:hover {
border: 5px inset #9F908F;
background-color: #E0CABB;
transform: rotateZ(-30deg);
}
.three {
background-color: #FBE2A9;
border: 5px solid #FFD18F;
outline: 5px solid transparent;
}
.three:hover {
outline: 5px solid #9E8463;
outline-offset: 5px;
}
.four {
width: 200px;
height: 100px;
background-color: #95A1B1;
margin: 0 auto;
}
.four:hover {
width: 250px;
height: 80px;
}
.five {
width: 100px;
height: 100px;
background-color: #E0CABB;
margin: 0 auto;
position: relative;
left: 50px;
}
.five:hover {
left: -50px;
}
img:hover {opacity: 0.2;}
.six {
width: 200px;
height: 200px;
margin: 0 auto;
background: url("ball.png");
background-repeat: no-repeat;
background-position: bottom center;
}
.six:hover {
background-position: top center;
}

}
</style>
</head>
<body>
<div class="box"><div class="one"> Хүрээ, дэвсгэр өнгө, хэлбэр

</div></div> <br>
<div class="box"><div class="two"> Хэлбэр, дэвсгэр өнгө

</div></div> <br>
<div class="box"><div class="three">Гадна хүрээ </div></div>

<br>
<div class="box"><div class="four"> Хэмжээ </div></div> <br>
<div class="box"><div class="five"> Байрлал </div></div> <br>
<div class="box"><div> Уусалт </div> <img src="car.jpeg">

</div> <br>
<div class="box"><div class="six"> Дэвсгэр зургийн байрлал

</div></div> <br>
</body>
</html>