عنوان مقاله :

افکت های الهام بخش برای سبک دهی متون

گردآوری و تالیف : حسام موسوی
تاریخ انتشار : 31 اردیبهشت 1394
دسته بندی ها : الهام بخش , طراحی وب

امروز ما میخوایم با ترکیب  Style text و Hover ثار خلاقی خلق کنیم که شاید بتونه الهام بخش شما باشه ، در تعدادی از این آثار از متدهای جدیدی به اسم SVG و  Canvas استفاده شده . همیشه اینطور بوده که وقتی به متن هاتون انیمیشن ها و افکت های خاصی اضافه میکنید ، مخصوصا زمانی که اون یه لینک باشه ، شما یه لوگو typographic و یا متن فوق العاده میسازین که واقعا هیچ محدودیتی در ایجاد آثار خلاقانه وجود نداره . بنابراین ما امروز تصمیم گرفیتم که یه ترکیب فوق العاده از Style text و Hover بهتون تحویل بدیم که که واقعا یه چیز خلاقانه از آب در میاد و امیدوارم از اونها لذت ببرید و الهام بگیرید .

من هر کدوم از این افکت ها رو برای یه لینک بصورت fullscreen در دمو قرار دادم بطوری که شما به راحتی میتونید افکت ها رو با Hover کردن با جزئیات کامل تماشا کنید . 

توجه : بدلیل استفاده از تکنیک های جدید برای افکت دادن به برخی از این لینک ها ، شما حتما باید از مرورگرهای مدرن و آپدیت شده استفاده کنید تا بتونید بطور کامل افکت ها رو بببنید . 

تمام افکت ها با ترکیب  Style text و Hover و همینطور با استفاده از تکنیک های جدید  SVG و  Canvas آماده شده ان که اسکریپت باحال  “jolt” که توسط Tiffany Rayside ساخته شده چاشنی کاره و همینطور برای افکت دهی از شبه کلاس های ::before و ::after برای هر لینک بهره بده شده . 

خوب بیاید به یکی از این افکت ها نگاه کنیم :

برای نمایش هر کدوم از این افکت ها بر روی لینکمون ما از  data attribute برای کد html مون بصورت زیر استفاده میکنیم .

<a class="link link--kukuri" href="#">Kukuri</a>

استایل مشترکی که در تمام لینک ها استفاده میشه بصورت زیره : 

.link {
	outline: none;
	text-decoration: none;
	position: relative;
	font-size: 8em;
	line-height: 1;
	color: #9e9ba4;
	display: inline-block;
}

اگه شما یه نگاه دقیق به افکت Kukuri که در بالا نشون دادیم بکنید ، متوجه میشید وقتی روی لینک Hover میکنید یه نوار نازک از سمت چپ به راست میره . این نوار زمانی که در حال عبوره یه رنگ رو همراه خوش برای لینکمون میکشه که اون رنگ با استفاده از شبه کلاسه ::before ساخته میشه . این انقتال ها با استفاده از خاصیت transition در css اتفاق میفته . که میتونید کدشو در زیر بببینید .

.link--kukuri {
	text-transform: uppercase;
	font-weight: 900;
	overflow: hidden;
	line-height: 0.75;
	color: #b2b0a9;
}

.link--kukuri:hover {
	color: #b2b0a9;
}

.link--kukuri::after {
	content: '';
	position: absolute;gi
	height: 16px;
	width: 100%;
	top: 50%;
	margin-top: -8px;
	right: 0;
	background: #F9F9F9;
	transform: translate3d(-100%,0,0);
	transition: transform 0.4s;
	transition-timing-function: cubic-bezier(0.7,0,0.3,1);
}

.link--kukuri:hover::after {
	transform: translate3d(100%,0,0);
}

.link--kukuri::before {
	content: attr(data-letters);
	position: absolute;
	z-index: 2;
	overflow: hidden;
	color: #424242;
	white-space: nowrap;
	width: 0%;
	transition: width 0.4s 0.3s;
}

.link--kukuri:hover::before {
	width: 100%;
}

امیدوارم این افکت ها مورد استفادتون قرار بگیره . 

مقالات پیشنهادی

وب سایت های الهام بخش برای طراحی - سری 9

امروز قصد داریم یک سری وبسایت های خارجی که بطور کاربردی ، زیبا و قدرتمند طراحی شدن رو براتون قرار بدیم تا شما بتونین با طریقه طراحی اونها آشنا بشین یا...

وب سایت های الهام بخش برای طراحی - سری 8

امروز قصد داریم یک سری وبسایت های خارجی که بطور کاربردی ، زیبا و قدرتمند طراحی شدن رو براتون قرار بدیم تا شما بتونین با طریقه طراحی اونها آشنا بشین یا...

20 صفحه الهام بخش Coming Soon

حتی اگر ماه ها ، زمان باقی مانده تا راه اندازی وبسایتی که در حال ساختش هستین ، شما باید از صفحات در دست ساخت یا به اصطلاح "Coming Soon" استفاده کنید ....

افکت های الهام بخش برای سبک دهی متون

امروز ما میخوایم با ترکیب Style text و Hover ثار خلاقی خلق کنیم که شاید بتونه الهام بخش شما باشه ، در تعدادی از این آثار از متدهای جدیدی به اسم SVG و...

دیدگاه های ارزشمند شما

هیچ دیدگاهی تا به این لحظه برای این موضوع ثبت نشده است