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

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

ნებისმიერი საიტის დაკვეთისას საშუალება გეძლევათ განათავსოთ ის უფასოდ ევროპულ სერვერზე

დაწვრილებით:

უფასო დომენი

ნებისმიერი ტიპის საიტის დაკვეთისას ჩვენგან უფასოდ მიიღებთ დომენურ სახელს*

დაწვრილებით:

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

ბიზნესი 900 ლარი.
ბიზნეს პრო  1500 ლარი.
ბიზნეს ელიტი 2000 ლარიდან.

დაწვრილებით:

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

საინფორმაციო სავიზიტო საიტი სრულად ინტეგრირებული CMS-ით
მხოლოდ 400 ლარად.

დაწვრილებით:

 

სიახლე ქართულ ვებსივრცეში! ერთი გვერდის პრინციპის თავსებადი (one page responsive) პრომო საიტი 380 ლარად. 

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

www.Globalins.ge

ოპტიმიზაცია

საიტის აუდიტი, ოპტიმიზაცია, პოპულარიზაცია, კონტექსტური რეკლამა, რეკლამა სოციალურ ქსელებში.

დაწვრილებით:

Facebook აპლიკაცია

ფეისბუკის აპლიკაციები, სოციალური პლაგინები, ინტეგრაცია ვებ გვერდში. ფეისბუკ-მაღაზია, FB marketplace, FB connect

დაწვრილებით:

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

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 მხტუნავი ბურთი

ანიმირებული 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) წარმოგვიდგენს ელემენტს ისე, თითქოს ის გვშორდებოდეს.

სურათის დამატება სტატიაში JCE რედაქტორის გამოყენებით

GT Studio-ს მიერ დამზადებული ყველა საიტი აღჭურვილა სპეციალური JCE რედაქტორით, რომელიც გაცილებით აადვილებს სტატიაში ტექსტზე და სურათებზე მუშაობას.

გახსენით სტატია რომელშიც გინდათ სურათის დამატება ან შეცვლა. (სტატია შეიძლება გამოძახებული იქნას ჯუმლას ადმინისტრატორის გვერდზე მთავარი მენიუდან Content > Article Manager). 

ვრცლად...

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

ჩვენი რეიტინგი

(კლიენტების შეფასება)

4,9 (5,0)

 

უძრავი ქონების პორტალი

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

www.GeorgiaBroker.ge

სიახლე

ერთი გვერდის პრინციპის თავსებადი (One page responsive) პრომო საიტი.

ნიმუში

www.citp.ge

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

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

ონლაინ მაღაზია 1800 ლარიდან
პროდუქციის კატალოგი 1100 ლარიდან
სიახლეების პორტალი 1300 ლარიდან
პერსონალური ვებ-გვერდი 400 ლარიდან
SEO (საძიებო ოპტიმიზაცია) 120 ლარიდან
საიტის ადმინისტრირება თვეში 40 ლარიდან


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

ლოგოები 80 ლარიდან
კორპორაციული სტილი 400 ლარიდან
ბანერები 60 ლარიდან

QR ბარათი

GTStudio QR code

blue-guaranteeვებ-დიზაინ სტუდია "GT Studio" გთავაზობთ თქვენი ორგანიზაციის საქმიანობის წარმატებულად მართვა პოპულარიზაციისათვის ინტერნეტთან დაკავშირებული საქმიანობის სრულ სპექტრს. პროფესიონალური კონსულტაციები, საიტის შექმნა, საიტების აუდიტი, და მზა საიტებისა და სარეკლამო მასალების დახვეწა, საიტების ოპტიმიზაციის სერვისი, საიტების პოპულარიზაცია, რეკლამირება და საძიებო სისტემებში წამოწევა, საიტების პოპულარიზაციის მონიტორინგი, საბანერო რეკლამა, ინტერნეტ რეკლამა - ესაა მოკლე ნუსხა იმ მომსახურებისა, რასაც გთავაზობთ ვებ დეველოპერული სტუდია "GT Studio" .

ავტორიზაცია

უკუკავშირი

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

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

+995 32 205 20 16

ან შეავსეთ ქვემოთმოყვანილი ფორმა და ჩვენ დაგირეკავთ.