تەشنا تېخنىكا كۇلۇبى

ئىمتىھانغا تەييارلىق قىلىمەن دەپ بىر كۈن كىتاب كۆرۈپتىمەن. زىرىكمەمدىغان كىشى؟! شۇ باھانىدە Css3 نىڭ كۆلەڭگە ئۈنۈمىنى ئۆگەنگەچ ئولتۇرۇپ تۆۋەندىكى "ھۆسنىخەت" ئۈنۈملىرىنى چىقىرىپ باقتىم. ئويلاپ باقسام بۇمۇ بولىدىغان ئىشكەن، بەزى كۆرۈنمە يۈز لايىھەلىرىدە موشۇنداقلا ئىشلەتمەمدۇق. قېنى ئەمىسە بىر - بىرلەپ كېلەيلۇق:
1. سىترولۇق خەت ئۈنۈمى
ئۈنۈمى تۆۋەندىكدەك: يېڭى تور كۆگۈلەر تولۇق قوللايدۇ

كودى تۆۋنەدىكىدەك:

.effect01{
	background-color: #333;
	color: #fefefe;
	text-shadow:0px 2px 1px #c0c0c0,
	            0px 4px 1px #b0b0b0,
	            0px 6px 1px #a0a0a0,
	            0px 8px 1px #909090,
              0px 10px 1px rgba(0,0,0,0.6);
	            
}

2. ئۇزۇن سايىلىك خەت

ئۈنۈمى تۆۋەندىكىدەك: يېڭى تور كۆرگۈلەر تولۇق قوللايدۇ

كودى تۆۋەندىكىدەك:

.effect02{  
  color:#333;  
  background-color: #ddd;  
  text-shadow:  
    1px -1px 0 #767676,   
    -1px 2px 1px #737272,   
    -2px 4px 1px #767474,   
    -3px 6px 1px #787777,   
    -4px 8px 1px #7b7a7a,   
    -5px 10px 1px #7f7d7d,   
    -6px 12px 1px #828181,   
    -7px 14px 1px #868585,   
    -8px 16px 1px #8b8a89,   
    -9px 18px 1px #8f8e8d,   
    -10px 20px 1px #949392,   
    -11px 22px 1px #999897,   
    -12px 24px 1px #9e9c9c,   
    -13px 26px 1px #a3a1a1,   
    -14px 28px 1px #a8a6a6,   
    -15px 30px 1px #adabab,   
    -16px 32px 1px #b2b1b0,   
    -17px 34px 1px #b7b6b5,  
    -18px 36px 1px #bcbbba,   
    -19px 38px 1px #c1bfbf,   
    -20px 40px 1px #c6c4c4,   
    -21px 42px 1px #cbc9c8,   
    -22px 44px 1px #cfcdcd;  
}

يەنى: text-shadow ئۈنۈمىنى قاتمۇقات ئىشلىتىپ چىقىرىشقا بولىدۇ.
3. ئويۇلما خەت ئۈنۈمى (ھەممە كۆرگۈ قوللايدۇ)

كودى تۆۋەندىكىدەك:

.effect03{  
  color: #202020;  
  background-color: #2d2d2d;  
  text-shadow:   
    -1px -1px 1px #111111,  
    2px 2px 1px #363636;  
}

4. قىيپاش سىزىقچە تەگلىك، بويالما گىرۋەكلىك خەت ئۈنۈمى(IE تور كۆرگۈسى قوللىمايدۇ)

كودى تۆۋەندىكىدەك:

 .effect04{  
  background-color: #333;  
  background-image:  
      linear-gradient(  
        45deg,  
        transparent 45%,  
        hsla(48,20%,90%,1) 45%,  
        hsla(48,20%,90%,1) 55%,  
        transparent 0  
        );  
    background-size: .05em .05em;  
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;  
  -webkit-text-stroke: 2px #111;  
}

يەنى background-image خاسلىقىنى ئىشلىتىمىز. webkit يادرولۇق كۆرگۈلەر نورمال قوللايدۇ
5. سىزىقچە ئىزلىما گىرۋەكلىك خەت ئۈنۈمى (پەقەت Webkit يادرولۇق كۆرگۈلا قوللايدىغان ئوخشايدۇ)

كودى تۆۋەندىكىدەك:

.effect05 {
  color: #DC554F;
  background-color: #27ae60;
  z-index: 3;
}

.effect05:before {
  content: attr(data-text);
  width: 100%;
  line-height: 200px;
  opacity: .5;
  position: absolute;
  top: 2px;
  left: 5px;
  background-image: linear-gradient(45deg, transparent 45%, #ebe9e0 45%, #ebe9e0 55%, transparent 0);
  z-index: -1;
  background-size: .05em .05em;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shadowGo 20s linear infinite;
}

يەنى: before ساختا ئوبىكت ئارقىلىق خەت گىرۋىكىدىكى سىزىقچىلارنى چىقىرىمىز. يۇقىرىقىلارنىڭ ئىچىدە: content: attr(data-text); بولسا div قىسمىدىكى data-text ئوبىكتىنىڭ قىممىتىنى قايتۇرىدۇ. ئاندىن ساختا ئوبىكتنىڭ كەڭلىك، ئىگىزلىك ۋە ئورۇنلىرىنى ئەسلى خەت بىلەن ئوخشاش قىلىپ بەلگىلەيمىز. تۇتۇقلۇق دەرىجىسىنى مۇۋاپىق بەلگىلەيمىز. ئاندىن ساختا ئوبىكىت تەگلىكىنى background-image خاسلىقى ئارقىلىق، قىيپاش سىزىق بىلەن بىزەيمىز. ئاندىن خەتنىلا قالدۇرۇپ background-clip ئارقىلىق ساختا ئوبىكت تەگلىكىنىڭ قالغان قىسمىنى كېسىپ ئېلىۋىتىمىز. شۇنىڭ بىلەن يۇقىرىقدەك ئۈنۈم چىقىدۇ.
6. سىترو سايىلىك خەت ئۈنۈمى

كودى تۆۋەندىكىدەك:

.effect06{  
    background-color: #7ABCFF;  
    color:#FFD300;  
    text-shadow:  
        0px 0px 0 #b89800,   
        1px -1px 0 #b39400,   
        2px -2px 0 #ad8f00,   
        3px -3px 0 #a88b00,   
        4px -4px 0 #a38700,   
        5px -5px 0 #9e8300,   
        6px -6px 0 #997f00,   
        7px -7px 0 #947a00,   
        8px -8px 0 #8f7600,   
        9px -9px 0 #8a7200,   
        10px -10px 0 #856e00,   
        11px -11px 0 #806a00,   
        12px -12px 0 #7a6500,   
        13px -13px 12px rgba(0, 0, 0, 0.55),   
        13px -13px 1px rgba(0, 0, 0, 0.5);  
}

يەنى ئۈستىدىكى ئىككىنچى ئۈنۈم بىلەن كۆپ پەرىقلىنىپ كەتمەيدۇ. پەقەت text-shadow نىڭ خاسلىقلىرى مۇۋاپىق تەڭشەكلسىلا تېخىمۇ كۆپ ئۈنۈملەرنى چىقىرىش مۇمكىن.
7. ھەرىكەتلىك قاتلانما خەت ئۈنۈمى

كودى تۆۋەندىكىدەك:

.effect07 p:nth-child(1) {
  transform: translateZ(4px);
  -ms-transform: translateZ(4px);	/* IE 9 */
  -webkit-transform: translateZ(4px);	/* Safari and Chrome */
  -o-transform: translateZ(4px);		/* Opera */
  -moz-transform: translateZ(4px);		/* Firefox */
}

.effect07 p:nth-child(2) {
  transform: translateZ(8px);
  -ms-transform: translateZ(8px);	/* IE 9 */
  -webkit-transform: translateZ(8px);	/* Safari and Chrome */
  -o-transform: translateZ(8px);		/* Opera */
  -moz-transform: translateZ(8px);	
}

.effect07 p:nth-child(3) {
  transform: translateZ(12px);
  -ms-transform: translateZ(12px);	/* IE 9 */
  -webkit-transform: translateZ(12px);	/* Safari and Chrome */
  -o-transform: translateZ(12px);		/* Opera */
  -moz-transform: translateZ(12px);	
}
p
.effect07 p:nth-child(4) {
  transform: translateZ(16px);
  -ms-transform: translateZ(16px);	/* IE 9 */
  -webkit-transform: translateZ(16px);	/* Safari and Chrome */
  -o-transform: translateZ(16px);		/* Opera */
  -moz-transform: translateZ(16px);	
}

.effect07 p:nth-child(5) {
  transform: translateZ(20px);
  -ms-transform: translateZ(2020px);	/* IE 9 */
  -webkit-transform: translateZ(20px);	/* Safari and Chrome */
  -o-transform: translateZ(20px);		/* Opera */
  -moz-transform: translateZ(20px);	
}

.effect07 p:nth-child(6) {
  transform: translateZ(24px);
  -ms-transform: translateZ(24px);	/* IE 9 */
  -webkit-transform: translateZ(24px);	/* Safari and Chrome */
  -o-transform: translateZ(24px);		/* Opera */
  -moz-transform: translateZ(24px);	
}

.effect07 p:nth-child(7) {
  transform: translateZ(28px);
  -ms-transform: translateZ(28px);	/* IE 9 */
  -webkit-transform: translateZ(28px);	/* Safari and Chrome */
  -o-transform: translateZ(28px);		/* Opera */
  -moz-transform: translateZ(28px);
}

يەنى: transform:rotate3d() خاسلىقى ئارقىلىق مائۇس خەتنىڭ ئۈستىگە كەلگەندە، Z ئوقنى بويلاپ 40 گرادۇس چۆرگىلەيدۇ. ئاندىن div ئىچىگە قويۇلغان 8 دانە p ئېلمىنىتى ئىچىدىكىn- خەتنى nth-child(n) خاسلىقى ئارقىلىق ئىزدەپ تاپىمىز ۋە قەدەممۇ - قەدەم ئىلگىرلىگەن ھالدا چۆرۈيمىز. شۇنىڭ بىلەن مائۇسنى ئۈستىگە ئەكەلگەندە قاتلانغان ئۈنۈم چىقىدۇ.
div قۇرۇلمىسى مۇنداق بولىدۇ:

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تەشنا تېخنىكا كۇلۇبى

تېخىمۇ كۆپ خەت ئۈنۈملىرىنى يەنە بىر زىرىككەندە ئولتۇرۇپ چىقىرىپ باقىمىز. قىززىققۇچىلار يازمىمىزنىڭ كېيىنكى قىسمىغا دېققەتتە بولغايسىزلەر!
يۇقىرىقى مىسالنىڭ تولۇق كودىنى بۇ يەر دىن كۆرۈڭ ۋە تەتقىق قىلىڭ!