CSS3 ტექსტის ეფექტები

მოძრავი ასოების ეფექტი მიღწეულია მხოლოდ CSS-ის და SVG (Scalable Vector Graphics) ტაგის გამოყენებით!

CSS კოდი

HTML, BODY { height: 100%;}

BODY { background: #082330;  background-size: .12em 100%; font: 16em/1 Arial;}
.text--line { font-size: .5em;}
svg { position: absolute; width: 100%; height: 100%;}
.text-copy { fill: none; stroke: white; stroke-dasharray: 7% 28%; stroke-width: 3px; -webkit-animation: stroke-offset 9s infinite linear; animation: stroke-offset 9s infinite linear;}
.text-copy:nth-child(1) { stroke: #360745; stroke-dashoffset: 7%;}
.text-copy:nth-child(2) { stroke: #D61C59; stroke-dashoffset: 14%;}
.text-copy:nth-child(3) { stroke: #E7D84B; stroke-dashoffset: 21%;}
.text-copy:nth-child(4) { stroke: #EFEAC5; stroke-dashoffset: 28%;}
.text-copy:nth-child(5) { stroke: #1B8798; stroke-dashoffset: 35%;}
@-webkit-keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; }}
@keyframes stroke-offset { 50% { stroke-dashoffset: 35%; stroke-dasharray: 0 87.5%; }}

HTML კოდი

<svg viewbox="0 0 1100 600">  <symbol id="s-text">    <text text-anchor="middle" x="50%" y="35%" class="text--line">      ანიმირებული ფერადი    </text>    <text text-anchor="middle" x="50%" y="68%" class="text--line2">      ტექსტი    </text>      </symbol>    <g class="g-ants">    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#s-text" class="text-copy"></use>       </g>    </svg>

ჩრდილი

გამოყენებულია ტაგი h1 კლასით class="elegantshadow"

ელეგანტური ჩრდილი

CSS კოდი

h1 {
font-family: "KA",Helvetica,sans-serif;
font-size: 92px;
padding: 80px 50px;
text-align: center;
text-transform: uppercase;
text-rendering: optimizeLegibility;
}
h1.elegantshadow {
color: #131313;
background-color: #e7e5e4;
letter-spacing: .15em;
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, -23px 46px 1px #d4d2d1, -24px 48px 1px #d8d6d5, -25px 50px 1px #dbdad9, -26px 52px 1px #dfdddc, -27px 54px 1px #e2e0df, -28px 56px 1px #e4e3e2;
}

ჭადრაკის დაფა

ჭადრაკის დაფა შექმნილია მხოლოდ CSS კოდით და სტანდარტული HTML <Table> ტაგის პარამეტრების გამოყენებით.

CSS კოდი

table {
 font-size: 3em;
 color: #333;
 border:3px solid #666;
 width: 584px;
 height: 580px;
 -webkit-box-shadow: 0px 0px 10px 2px rgba(50, 50, 50, 0.4);
 -moz-box-shadow: 0px 0px 10px 2px rgba(50, 50, 50, 0.4);
 box-shadow: 0px 0px 10px 2px rgba(50, 50, 50, 0.4);
 margin: 20px;
}
td {
 background:#FFE7AA;
 height:70px;
 width:70px;
 text-align:center;
}
tr:nth-child(odd) td:nth-child(even),
tr:nth-child(even) td:nth-child(odd) {
 background:#D4B66A;
}

HTML კოდი

<table>
 <tr>
 <td>&#9820;</td>
 <td>&#9822;</td>
 <td>&#9821;</td>
 <td>&#9819;</td>
 <td>&#9818;</td>
 <td>&#9821;</td>
 <td>&#9822;</td>
 <td>&#9820;</td>
 </tr>
 <tr>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 <td>&#9823;</td>
 </tr>
 <tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <tr>
 <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
 </tr>
 <tr>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 <td>&#9817;</td>
 </tr>
 <tr>
 <td>&#9814;</td>
 <td>&#9816;</td>
 <td>&#9815;</td>
 <td>&#9813;</td>
 <td>&#9812;</td>
 <td>&#9815;</td>
 <td>&#9816;</td>
 <td>&#9814;</td>
 </tr>
</table>

3D მხტუნავი ბურთი

შენიშვნა: შედეგი გამოჩნდება მხოლოდ იმ ბრაუზერებში, რომელთაც აქვთ შესაბამისი CSS მახასიათებლების მხარდაჭერა.

 HTML

 HTML კოდი:

<div id="ballWrapper">
	<div id="ball"></div>
	<div id="ballShadow"></div>			
</div>	

მთელი HTML კოდი შედგება სამი მარტივი  DIV ელემენტისაგან:  “#ballWrapper” მთავარი DIV, რომელიც გარს ერტყმის ბურთს. ეს  DIV განსაზღვრავს ბურთის მდგომარეობას და სიმაღლეს ეკრანზე. შემდეგი “#ball” ელემენტი რომელიც განსაზღვრავს (markup) ბურთს და ბოლო, “#ballShadow” რომელიც განსაზღვრავს ბურთის ჩრდილს ბურთისგან განცალკევებით.  

CSS

უპირველესად უნდა განისაზღვროს საბაზისო სიგრძე და სიგანე  ‘#ballWrapper’ DIV -თვის. ეს დაგვეხმარება ბურთის ეკრანის ცენტრში პოზიციონირებაში.

#ballWrapper {
	width: 140px;
	height: 300px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -70px;
}

მიაქციეთ ყურადღება, რომ  DIV -ის ორივე, ზედა და მარცხენა პოზიციების თვისებები განისაზღვრა  ‘50%’, და უარყოფითი ზედა და მარცხენა ველები განისაზღვრა DIV-ის სიგრძისა და სიგანის ზუსტად ნახევარი ზომით. ამ მეთოდით ბურთი იქნება მუდამ ეკრანის ცენტრში. 

შემდეგ ხაზზე მივანიჭოთ ბურთს გარკვეული სტილი: 

#ball {
	width: 140px;
	height: 140px;
	border-radius: 70px;
	background: linear-gradient(top,  rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
	box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4), 
				inset -2px -1px 40px rgba(0,0,0,0.4), 
				0 0 1px #000;	
}

ბურთი განისაზღვრა თანაბარი ზომის სიგრძე სიგანის პარამეტრებით და ჩარჩოს რადიუსით ( ‘border-radius’) სიდიდით ’70px’ (სიგრძე სიგანის ნახევარი). შესაბამისად მივიღეთ რგოლი (ბურთი) და არა ოვალი.

 შემდეგი მნიშვნელოვანი ელემენტი არის ბურთის ფერი (ფონი).  ბურთს მიცემული აქვს წრფივი გრადიენტი (linear background) და სამი განსხვავებული დონის ჩრდილი (box shadow), რაც გვაძლევს  3D ეფექტს.

თუ დააკვირდებით ბურთს, შეამჩნევთ, რომ  მცირე ზომის ოვალური ფორმა აქვს ზედა მხარეს, რაც მას არეკვლის ეფექტს აძლევს. შესაბამისი სტილი შემდეგია:

#ball::after {
	content: "";
	width: 80px; 
	height: 40px; 
	position: absolute;
	left: 30px;
	top: 10px;	
	background: linear-gradient(top,  rgba(232,232,232,1) 0%,rgba(232,232,232,1) 1%,rgba(255,255,255,0) 100%);
	border-radius: 40px / 20px;	
}

გამოყენებულია CSS ფსევდო ელემენტი ::after და მინიჭებული აქვს წრფივი გრადიენტი და გაუმჭირვალობა (opacity). დამატებით, ოვალური ფორმის მისაცემად გამოყენებულია ჩარჩოს რადიუსი  ’40px / 20px’ .

შემდეგი, ბურთის ჩრდილი:

 #ballShadow {
	width: 60px;
	height: 75px;
	position: absolute;
	z-index: 0;
	bottom: 0;
	left: 50%;
	margin-left: -30px;
	background: rgba(20, 20, 20, .1);
	box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
	border-radius: 30px / 40px;	
}

მხტუნავი ანიმაცია

თავიდან ბურთს ენიჭება ანიმაციის თვისება (property):

#ball {
	animation: jump 1s infinite;
}

ანიმაციას მიენიჭა სახელი (jump), ხანგრძლივობა (1 წამი)  და გამეორების რაოდენობა  - უსასრულო  ‘infinite’ .

ანიმაცია:

@keyframes jump {
	0% {
		top: 0;
	}
	50% {
		top: 140px;
		height: 140px;
	}
	55% {
		top: 160px; 
		height: 120px; 
		border-radius: 70px / 60px;
	}
	65% {
		top: 120px; 
		height: 140px; 
		border-radius: 70px;
	}
	95% {
		top: 0;
	}
	100% {
		top: 0;
	}
}

რაც შეეხება ბურთის ჩრდილს: პირველად ჩრდილს ენიჭება შესაბამისი ანიმირების თვისება:

#ballShadow {
	animation: shrink 1s infinite;
}

გამოიყენება იგივე მნიშვნელობები, რაც ბურთის შემთხვევაში, მხოლოდ სხვა სახელით  shrink:

@-keyframes shrink {
	0% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
	50% {
		bottom: 30px;
		margin-left: -10px;
		width: 20px;
		height: 5px;
		background: rgba(20, 20, 20, .3);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.3);
		border-radius: 20px / 20px;
	}
	100% {
		bottom: 0;
		margin-left: -30px;
		width: 60px;
		height: 75px;
		background: rgba(20, 20, 20, .1);
		box-shadow: 0px 0 20px 35px rgba(20,20,20,.1);
		border-radius: 30px / 40px;
	}
}

ჩრდილის ანიმირებისას სხვა მახასიათებლები/თვისებები გამოიყენება ვიდრე ბურთისას. რეალისტური ეფექტის მისაღწევად საჭიროა ჩრდილის სიგრძის, სიგანისა და გაუმჭირვალობის ცვლილებები. ბურთი როცა უახლოვდება იატაკს, ჩრდილი უნდა იყოს უფრო მუქი და მცირე და შესაბამისად, ბურთის ახტომისას - უფრო ღია და დიდი.

და ბოლოს ბურთს დამატებული აქვს დაწკაპუნების ეფექტი “click effect”, ბურთზე დაწკაპვის და გაჩერებისას გვეჩვენება, თითქოს ბურთი გვშორდება- უკან მიდის.  ამ ეფექტის მისაღწევად გამოყენებულია ფსევდო კლასი ‘:active‘ , ეფექტებით გადასვლა (transition) და გრადაცია ‘scale’ :

#ballWrapper {
	transform: scale(1);
	transition: all 5s linear 0s;
}

#ballWrapper:active {
	transform: scale(0);
}

გადასვლა გრადაციის/ზომის მნიშვნელობიდან  (1) გრადაციაზე (0) წარმოგვიდგენს ელემენტს ისე, თითქოს ის გვშორდებოდეს.

ექვსკუთხა (Hexagon) ფორმის ფოტო მხოლოდ CSS ით

ექვსკუთხა (Hexagon) ფორმის ფოტო შექმნილია მხოლოდ CSS ის პარამეტრების გამოყენებით.

.hexagon {
 position: relative;
 width: 300px; 
 height: 173.21px;
 margin: 86.60px 0;
 background-image: url(აბსოლუტური URL);
 background-size: auto 334.8632px;
 background-position: center;
 box-shadow: 0 0 20px rgba(0,0,0,0.6);
 border-left: solid 5px #e4e4e4;
 border-right: solid 5px #e4e4e4;
}
.hexTop,
.hexBottom {
 position: absolute;
 z-index: 1;
 width: 212.13px;
 height: 212.13px;
 overflow: hidden;
 -webkit-transform: scaleY(0.5774) rotate(-45deg);
 -ms-transform: scaleY(0.5774) rotate(-45deg);
 transform: scaleY(0.5774) rotate(-45deg);
 background: inherit;
 left: 38.93px;
 box-shadow: 0 0 20px rgba(0,0,0,0.6);
}
/*counter transform the bg image on the caps*/
.hexTop:after,
.hexBottom:after {
 content: "";
 position: absolute;
 width: 290.0000px;
 height: 167.4315780649915px;
 -webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
 -ms-transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
 transform: rotate(45deg) scaleY(1.7321) translateY(-83.7158px);
 -webkit-transform-origin: 0 0;
 -ms-transform-origin: 0 0;
 transform-origin: 0 0;
 background: inherit;
}
.hexTop {
 top: -106.0660px;
 border-top: solid 7.0711px #e4e4e4;
 border-right: solid 7.0711px #e4e4e4;
}
.hexTop:after {
 background-position: center top;
}
.hexBottom {
 bottom: -106.0660px;
 border-bottom: solid 7.0711px #e4e4e4;
 border-left: solid 7.0711px #e4e4e4;
}
.hexBottom:after {
 background-position: center bottom;
}
.hexagon:after {
 content: "";
 position: absolute;
 top: 2.8868px;
 left: 0;
 width: 290.0000px;
 height: 167.4316px;
 z-index: 2;
 background: inherit;
}

<div class="hexagon">
<div class="hexTop">&nbsp;</div>
<div class="hexBottom">&nbsp;</div>