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

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

CSS კოდი

[code]
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%; }}





[/code]

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 კოდი

[code]
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;
}

[/code]

HTML კოდი

[code]
<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>


[/code]

ანიმირებული 3D მხტუნავი ბურთი მხოლოდ CSS3 გამოყენებით

ანიმირებული 3D მხტუნავი ბურთი შექმნილია მხოლოდ CSS3 -ის გადასვლის(transitions), ანიმაციის (animations) and ჩრდილის (shadow) ეფექტების გამოყენებით.

შენიშვნა: შედეგი გამოჩნდება მხოლოდ იმ ბრაუზერებში, რომელთაც აქვთ შესაბამისი 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 ის პარამეტრების გამოყენებით.

CSS კოდი

[code]
.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;
}




[/code]

HTML კოდი

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

მეტი სტატია...

ქვეკატეგორიები

სტატიები ჯუმლას შესახებ

უფასო ჰოსტინგი

უფასო დომენი

დინამიური საიტი

სავიზიტო საიტი

სიახლე! უფასო SSL სერტიფიკატი

ბოლო ნამუშევარი

საქველმოქმედო პროექტი

მიმდინარე პროექტი

ოპტიმიზაცია

უახლესი ნამუშევრები

www.energy4x4.ge

www.creativefeed.ge

www.gochachkhaidze.com

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

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

CSS კოდი

HTML კოდი

ჩრდილი

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

CSS კოდი

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

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

CSS კოდი

HTML კოდი

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

HTML

CSS

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

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

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

CSS კოდი

HTML კოდი

მეტი სტატია...

ქვეკატეგორიები

დაგვიკავშირდით:

+995 32 205 20 16

+995 551 42 44 84

emailProtector.addCloakedMailto("ep_9f862d18", 0);

მრავალფუნქციური ონლაინ მაღაზია

სიახლე

შეთავაზებები:

საიტის სტრუქტურები

გრაფიკული მომსახურება

QR ბარათი

ავტორიზაცია

უკუკავშირი

დაინტერესდით?

დაგვირეკეთ მოგვწერეთ

უკუკავშირი

უ
კ
უ
კ
ა
ვ
შ
ი
რ
ი