Ruhanyat.kz сайтындағыдай CSS3-те әдемі кітапхана жасау (Jquery-сіз)

Мына постта Mzafar Ruhanyat.kz сайтындағыдай CSS3 мен Jquery арқылы әдемі кітапхана жасау жолын көрсеткен екен.

Бұл постта мен сол эффектті тек қана CSS3 те қалай жасау жолын көрсетпекшімін. ол үшін бізге керекгі, html мен css. қарапайым hover псевдоклассы және кешегі айтқан transition функциясын кеңінен қолдандым.

сонымен әнгімені қойып бірден кодқа кірісейін:
html де тізім
(тізім қысқартылып көрсетілді, бүкіл бетті алып кетпес үшін)
<ul>
<li>
<a class="link" href="http://ruhanyat.kz/kitaptar/namaz-kitap.rar">

<img src="images/1.png" ">
<span class="content"></span>
<span class="text">
<span>Намаз кітабы</span>
<span>"Бес Уақыт Намаз" кітабы</span>
</span>
</a>
</li>
<li>
<a class="link" href="#">
<img src="images/6.jpg">
<span class="content"></span>
<span class="text">
<span>Проекттер</span>
<span>Біз жасаған проекттер</span>
</span>
</a>
<div class="uroven3 end">
<a href="http://kazgurt.muslimun.kz">"Қазығұрт" діни порталы</a>
<a href="http://diniblog.kz">"ДіниБлог" блогы</a>
</div>
</li>
</ul>


енді css

body {background-image: url(images/bg_.jpg);}
ul {
	list-style: none;
	font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
	font-size: 14px;
	margin-top: 250px;
	margin-left: auto;
	margin-right: auto;
	display:block;
}
ul li {
	float: left;
	width: 190px;
	height: 85px;
	position: relative;
	cursor: pointer;
	background-image: url(images/overlay.png);
	z-index: 10;
}
.link {
	position: relative;
	height: 85px;
	display:block;
	text-decoration: none;
	text-shadow: 1px 1px 1px black;
}
.link img {
	width: 0px;
	height: 0px;
	position:absolute;
	bottom: 0px;
	display: block;
	left: 95px;
        transition: height 0.2s ease-in-out 0s, width 0.2s ease-in-out 0s, left 0.2s ease-in-out 0s;
-webkit-transition: height 0.2s ease-in-out 0s, width 0.2s ease-in-out 0s, left 0.2s ease-in-out 0s;
-moz-transition: height 0.2s ease-in-out 0s, width 0.2s ease-in-out 0s, left 0.2s ease-in-out 0s;
-o-transition: height 0.2s ease-in-out 0s, width 0.2s ease-in-out 0s, left 0.2s ease-in-out 0s;
}
.text {
	position: absolute;	
	top: 25px;
	left: 15px;
	transition: top 0.2s ease-in-out 0.5ms;
-webkit-transition: top 0.2s ease-in-out 0.5ms;
-moz-transition: top 0.2s ease-in-out 0.5ms;
-o-transition: top 0.2s ease-in-out 0.5ms;
}
.text span {
	position: absolute;
}
.text span:first-child {
	color: white;
	font-size: 24px;
	float: left;
	clear: both;
	width: 190px;
}	
.text span:last-child {
	color: #0B75AF;
	float: left;
	clear: both;
	width: 155px;
	font-size: 10px;
	letter-spacing: 1px;
	top: 30px;
	display: block;
	text-align: center;
}
.content {
	position: absolute;
	background: #111;
	top: 85px;
	width: 190px;
	height: 0px;
	left: 0px;
	box-shadow: 0px 0px 4px #000 inset;
        transition: height 0.2s ease-in-out 0s;
-webkit-transition: height 0.2s ease-in-out 0s;
-moz-transition: height 0.2s ease-in-out 0s;
-o-transition: height 0.2s ease-in-out 0s;
	
}
.uroven3 {
	z-index: -1;
	visibility: hidden;
	position: absolute;
	width: 190px;
	height: 190px;
	top: 85px;
	left: 0px;
	background: black;
	transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-webkit-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-moz-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-o-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;

}

.uroven3 a {
float: left;
clear: both;
line-height: 30px;
color: #0B75AF;
text-align: center;
width: 100%;
}
.end {
	transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-webkit-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-moz-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
-o-transition: visibility  0s ease-in-out 0.2s, left 0.2s ease-in-out 0.2s;
	}
/*тізімнің стильі осымен бітті
кодттың көптігінен шошымаңыз бұлар күнделікті қолданып жүрген стильдеріміз*/

тек бір жаңалығы ол transition свойствасы. ескерту менің браузерім хром болғасын ендігі посттарда мен тек -webkit- префиксін қолданатын боламын, бірақ кростбраузерлығы үшін исходныйында мылжың кодты жазып қоямын

енді стиль бітті, қалғаны ховер эфекттер
ul li:hover .content {
	height: 190px;
}
ul li:hover .text {
	top: 135px;
	}
ul li:hover .uroven3 {
	visibility: visible;
	left: 190px;
}
ul li:hover .link img {
	height: 230px;
	width: 190px;
	left: 0px;
	}
ul li:hover .end {
	visibility: visible;
	left: -190px;
	}	


барлық анимацияларды шығарып тұрған осы ховерлер аман болсын. ))

біттііііііі, және айтпағым әр молда білгенін оқиды демекші)) сонғы кездері CSS3 ті барынша үгіттеп жүрмін)) болашаққа ұмтылайық ағайындар )) қазірден бастап қолданып үйрене беріңдер. Джейкуериге өкпем жоқ, бірақ уақыт өте келе оның салмағы өкінішке орай азайып жатқан жоқ. CSS3 те жасалынатын эффект үшін жетпіс сексен киллобайт джейкуери артықтау сияқты.

келесі тақырыпта осы transition ды ашып түсіндіретін боламын.

мына жерден көре аласыз демосын

hosting.users.kz/primer/css-3.html

12 пікір

MSHERIMBEK
Бәрекелді, мәстір:) Қолың дерт көрмесін:) Әдемі шығыпты!
Abylai
Mzafar ның эффекті ғой, мен тек толықтай CSS3 ке өткіздім )
Arhun
Енді түсінікті сияқты, бірақ бастапқы бетті істеу үшін осындай түсініксіз мәтіндер жазуы, толтыруы қиынды нәрсе болатын шығар?
Abylai
бұл қайта аз қод, қиын түгі де жоқ, күнделікті қолданып жүрген css, бірден үшінші нұсқасына өтіп кетпей осылай жәймен жәймен css3пен бірге дамып, үйренген дұрыс сияқты.
Abylai
Перл ді миым ұқпады, Pythonды көру керек. сенің блогыңды күтіп жүрмін )) браузер ядроларына префикс арқылы ерінбей жазып шыққанда біршама ұолданушылар көре алады. аз қалды ғо. бір жылда өтіп кетерміз деген үміттемін.
MSHERIMBEK
20 минутта жазып шыққан адамды айтсай:)
Abylai
сол үшін мен Mzafar ның эффекті ғой, мен тек толықтай CSS3 ке өткіздім ) деп жазып кеткен едім.
Abylai
JS JQ ді папов атамыз уйретіп кеткен) бірак Ajax қа қолданамын оны. эффекттер толығымен сss3 те жазап журмін. плавный қылуға болады анимейшнмен )) JQдің мүмкіндігін жоққа шығарып жатқаным жоқ, сss3 те тезірек өтсеңдер екен деп үгіттеп жатқаным ғо )
ereke_enu
О мұнда программистер бар екен))) Барлығыңа жалынды сәлем! Не ғо, си шарп-та бар ма жазатындар???
meirambek95
Абылай өзіңнің жеке сайтың бар ма
Abylai
әрине міне hosting.users.kz
meirambek95
Сайтың жақсы екен (ішінде дым жоқ сайт), сайтыңды жазып кет
Тек тіркелген қолданушылар ғана пікір қалдыра алады.