افزونه سئو وردپرس یاست Yoast SEO Premium فارسی نسخه ۶٫۳٫۱


افزونه سئو وردپرس یاست Yoast SEO Premium فارسی

 

افزونه سئو وردپرس یواست Yoast SEO Premium فارسی

افزونه سئو وردپرس یاست Yoast SEO Premium فارسی

افزونه wordpress seo by yoast یک افزونه سئو وردپرس حرفه ای هست که بدون شک می توان با افتخار اعلام کرد wordpress seo by yoast مشهور ترین و پر مخاطب ترین افزونه سئو وردپرس در بین تمامی افزونه های موجود در دنیاست! افزونه سئوی yoast از آن دسته افزونه هایی هست که بلافاصله بعد از نصب وردپرس بایستی آنرا نصب کنید تا سئوی سایت شما ارتقا یابد. بدون نصب افزونه های سئو سایت شما هیچوقت به آن ورودی گوگل دلخواه شما نخواهد رسید. چون بدون نصب این افزونه ها متا تگ های مورد نیاز سئو در سایت شما پیدا نخواهد شد!

افزونه Yoast Seo دارای دو نسخه رایگان و پرمیوم هست که می توانید نسخه رایگان آنرا از اینجا دانلود کنید، اما نسخه رایگان و نسخه حرفه ای افزونه سئو وردپرس تفاوت هایی با یکدیگر دارد…

تفاوت نسخه رایگان Yoast Seo و نسخه پرمیوم چیست؟

  • قابلیت قرار دادن بیش از یک کلمه کلیدی کانونی برای هر مطلب

  • دارای ویدیوهای آموزشی کار با افزونه

  • راهنمای هر بخش بصورت قدم به قدم

  • امکان ریدایرکت کردن آدرس سایت

قویترین افزونه سئو وردپرس

افزونه yoast seo premium ( که بیشتر با نام  wordpress seo by yoast premium ) شناخته شده امکانات جدیدی را به نسخه رایگان خود اضافه کرده:

افزونه Redirect وردپرس

مدیریت ریدایرکت ها

این قابلیت به شما کمک می کند تا سلامت سایتتان را حفظ کنید و سایت خود را بروز نگه دارید!

چه موقع از مدیریت ریدایرکت استفاده می کنیم؟

زمانی که شما یک صفحه یا یک مطلب از سایتتان را حذف می کنید. ریسک زیادی انجام داده اید! در پکیج آموزش سئو هم خدمت شما توضیح دادم که خطاهای وبمستر تولز چه بر سر وبسایت شما می آورند. گوگل به شدت مخالف است با سایتی که خطای ۴۰۴ زیادی دارد.

بهترین روش حذف یک مطلب از سایت بدون افت سئو

بهترین روش حذف یک مطلب از سایت بدون افت سئو چیست؟

حالا افزونه وردپرس سئو پرمیوم با شما همراه هست تا در صورتی که یک صفحه از سایت شما حذف شد ، در سایت وردپرسی شما جستجو کرده و مطلبی که بیشترین شباهت را با صفحه درخواستی کاربر شما دارد پیدا می کند و کاربر را به آن صفحه انتقال می دهد. این یعنی سایتی بدون خطای ۴۰۴!

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

قابلیت قرار دادن چند کلمه کانونی برای هر صفحه

کلمه کانونی یکی از قابلیت های مهم وردپرس سئو هست. شما می توانید برای هر صفحه از سایتتان ، یک کلمه کانونی تعریف کنید و مطلب را بر اساس این کلمه سئو کنید. متاسفانه نسخه رایگان این افزونه فقط از یک کلمه کانونی پشتیبانی می کند اما در نسخه پرمیوم می توانید بصورت همزمان چندین کلمه کانونی برای سایتتان انتخاب کنید.

افزونه سئو وردپرس

حذف تبلیغات از wordpress seo by yoast

در این نسخه دیگر تبلیغاتی از طرف سازنده در پنل وردپرس شما نمایش داده نمی شود. شاید موضوع چندان مهمی نباشد اما به هر حال می تواند ذهن شما را از حاشیه ها دور کرده و شما را متمرکز کند بر انجام تنظیمات سئوی سایتتان به شکل کاملا اصولی

تبلیغات افزونه سئو وردپرس

و آخرین نکته پاسخی هست به سوالات دوستان عزیز که فروشگاه ساز از چه افزونه ای برای سئو استفاده می کند. با افتخار اعلام میکنیم که ما هم در فروشگاه ساز و هم سایت های مشتریان سئو از Yoast SEO Premium استفاده می کنیم.

 

نوشته افزونه سئو وردپرس یاست Yoast SEO Premium فارسی نسخه ۶٫۳٫۱ اولین بار در طراحی قالب فروشگاهی. پدیدار شد.



Source link

طراحی قالب فروشگاهی


قالب وردپرس پندار ROCO یک انتخاب ایده آل برای همه تجارت ها وکسب و کارهاست. مهم نیست که شما یک کد نویس و برنامه نویس باشید یا یک فرد مبتدی این قالب راهکارهای زیادی را پیش روی شما قرار می دهد بدون هیچ دانشی می توانید همین امروز سایتتان را راه اندازی کنید. پشتیبانی فوق العاده ما هم باعث می شه که شما این اطمینان را داشته باشید که می توانید همیشه با مشترین در ارتباط باشید

توجه! کنید که رنگ بندی تک تک اجزا سایت، توسط پنل مدیریت قابل تغییر می باشد.

سئو بهینه سازی جهت موتورهای جستجوگر این پوسته فوق العاده می باشد به راحتی در سطر اول نتایج گوگل باشید

این بسته نصبی جوابگوی هر کسب و کار و حرفه ای می باشد مهم نیست که شما رستوران دار ، وبلاگ نویس، طراح و یا یک مغازه دار هستید.

 

در این پست وردپرس به معرفی قالب وردپرس پندار roco میپردازیم که دارای یک پنل تنظیمات بسیار قوی و حرفه ای با امکانات متنوع در اختیارتان میگذارد از جمله تغییر رنگ ، طرح جعبه ای یا پهن ، سربرگ متفاوت ،  تنظیم فونت قسمت های مختلف ، امکان انتخاب طرح های متنوع برای وبلاگ و دارای نمونه کار و فروشگاه به طور یقین کلیه نیار شما را برطرف میسازد

این پوسته وردپرس دارای صفحه ساز muffin buolder میباشد که میتوانید توسط این صفحه ساز فارسی برگه های خود را به خوبی ایجاد و ویرایش کنید و بیش از ۲۰۰ شورت کد در این ویرایشگر موجود است که میتوانید از انها استفاده کنید

از ویژگی های این قالب را میتوان به واکنشگرا بودن و ریسپانسیو بودن ان اشاره کرد که در تمامی مرورگر ها و صفحات نمایش به نمایش در میاید.

قالب شرکتی پندار

 

از ویژگی های بارز این قالب میتوان به سرعت لود فوق العاده ی ان اشاره کرد که کد های قالب بهینه و سئو شده اند و نتایج بسیار خوبی رای شما در موتور های جوستجو ایجاد میکنند 

برای هر صفحه از مطالب خود میتوانید یک اسایدر تعریف کنید و از ان بهره مند شوید استفاده از فرم تماس و استفاده از چهار نوع منو دست شما را کاملا باز میگذارد .

ویژگی های بارز این قالب میتوان به سرعت لود فوق العاده ی ان اشاره کرد

 

  • اسلایدر برای هر صفحه می تواند تنظیم شود.
  • اسلایدر حرفه ای
  • فرم تماس۷تنظیم به عنوان بسیاری از اشکال مختلف به عنوان شما می خواهید
  • تماس با یک ضربه ویژه تلفن های همراه
  • به طور کامل واکنش گرا
  • چهار لایه بندی
  • چهار نوع منو – با پشتیبانی از منوی چسبنده
  • هشت تا ویجت درون قالبی
    • Muffin Flickr
    • Muffin Menu
    • Muffin Quick Facts
    • Muffin Recent Comments
    • Muffin Recent Posts
    • Muffin Tag Cloud
    • Revolution Slider widget
    • Thumbnail Gallery widget
  • بی نهایت سایدبار (ناحیه ابزارکی)
    • شما می توانید سایدبارهای دلخواه‌تان را ایجاد کنید، ابزارک‌های دلخواه‌تان را در آن‌ها قرار دهید و در بخش‌های مختلف از آن‌ها استفاده کنید.
    • بسته نصبی آسان
    • تمامی محتوا و فایل ها مانند نمونه نمایشی با یک کلیک برای شما ظاهر می شود
    • چندین نمونه تب ساز



Source link

متد Before در جی کوئری – درس پانزدهم


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

متد before در جی کوئری

متد Before  در جی کوئری

جی کوئری یک کتابخانه ی جاوا اسکریپت سریع, کوچک و بسیار غنی می باشد. جی کوئری یک چارچوب از جاوا اسکریپت است که هدف آن آسان ساختن استفاده از کد های جاوا اسکریپت در طراحی سایت می باشد. با متد ها و قواعد دستوری جی کوئری که در آموزش های قبلی به آن ها اشاره شد می توانید عناصر Html را انتخاب کنید و عملیات مورد نظر خود را بر روی آن ها انجام دهید. در این آموزش تیم طراحی سایت اسپادان قصد دارد شما را با متد Before در جی کوئری آشنا کنیم.

به وسیله ی متد Before در جی کوئری می توانید محتوای مورد نظر خود را قبل از عناصر انتخاب شده در صفحه ی Html قرار دهید.

طریقه ی استفاده از متد Before در جی کوئری به صورت زیر است.

$(selector).before(content,function(index))

selector :  مشخص کننده ی عنصری است که می خواهید محتویات مورد نظرتان قبل از آن وارد شود.

Content  :  مشخص کننده ی محتویاتی است که می خواهید قبل از عنصر مورد نظر خود درج کنید.

 

به مثال های زیر توجه کنید:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("p").before("<p>Hello world!</p>");
    });
});
</script>
</head>
<body>
<button>Insert content before each p element</button>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
</body>
</html>

در این مثال با استفاده از متد Before با هر بارکلیک بر روی دکمه  همان طور که مشاهده می کنید متن Hello world! قبل از متن This is a paragraph  به نمایش در می آید. وبا هر بار کلیک تعداد متن های قبل از متن This is a paragraph  بیشتر می شود.

متد Before در جی کوئری

مثال دوم:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function beforeText() {
    var txt1 = "<b>I </b>";                    // Create element with HTML
    var txt2 = $("<i></i>").text("love ");     // Create with jQuery
    var txt3 = document.createElement("b");    // Create with DOM
; "txt3.innerHTML = "jQuery!
    $("img").before(txt1, txt2, txt3);    // Insert new elements before img
}
</script>
</head>
<body>
<img src="/images/w3jquery.gif" alt="jQuery" width="100" height="140">
<p>Click the button to insert text before the image.</p>
<button onclick="beforeText()">Insert before</button>
</body>
</html>

در این مثال با استفاده از متد Before با هر بار کلیک کردن بر روی دکمه یک متن قبل از تصویر مورد نظر به نمایش در می آید.

متد Before در جی کوئری

مثال سوم :

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
}()$(document).ready(function
    }()$("button").click(function
    }() $("p").before(function(n)
        ;" >  return "<div>The p element below has index " + n + ".</div
        });
    });
    });
</script>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is another paragraph.</p>
<button>Insert content before each p element</button>
</ < body
</html>

در این مثال در متد Before به جای متن از تابع استفاده شده است. در تابع function یک متغیر n وجود دارد. که این متغیر بین ۰ تا ۲ در حال تغییر می باشد. در این قطعه کد سه متن وجود دارد که با هر با کلیک بر روی دکمه ,قبل از هر کدام از سه متن نوشته ی The p element below has index باید درج شود.

متد before در جی کوئری

مثال چهارم :

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( "<b>Hello</b>" );
</script>
 
</body>
</html>

در این مثال ساده کلمه ی Hello قبل از is what I said درج می شود.

متد before در جی کوئری مثال پنجم :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-">
<title>Inserting HTML Contents Before or After the Elements in jQuery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Add content after a div container on document ready
 
    
    // Add content before a div container on document ready
    $("#container").before("<p>&mdash; Demo Text &mdash;</p>");
    

    // Add content before heading on button click
    $("button.insert-before").click(function(){
        $("h1").before('<img src="/examples/images/marker-left.gif" alt="Symbol">');
    });
});
</script>
<style type="text/css">
    h1{
        display: inline-block; /* To place marker image and heading in one line */
    }
    body{
        text-align: center;
    }
</style>
</head>
<body>
    <h1>Hello World</h1>
    <hr>
    <button type="button" class="insert-before">Insert Before</button>
   
    <hr>
    <div id="container">
        <p>Lorem ipsum dolor sit amity, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.</p>
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>
    </div>
</body>
</html>

در این مثال با استفاده از متد Before با هر بار کلیک بر روی دکمه یک تصویر قبل از عنوان کلی متن قرار می گیرد.

متد before در جی کوئری

در نهایت از همراهی شما دوستان عزیز اسپادان سپاسگذاریم .

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

نوشته متد Before در جی کوئری – درس پانزدهم اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

۱۰ افکت css


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

10 افکت css

معرفی css

در این مقاله تیم طراحی سایت اسپادان قصد دارد شما را با ۱۰ افکت css آشنا کند. css  یک زبان برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به  html اضافه شدند، توسعه دهندگان وب را دچار نگرانی کرد چرا که اضافه کردن رنگ و فونت در سایت های بزرگ در هر بخشی از صفحه بسیار زمان بر بود. برای حل همین مشکل، کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد.

با امکاناتی که css در اختیارمان قرار می دهد می توانیم طرح های بسیار زیبایی در صفحات سایت ایجاد کنیم. در این مقاله ۱۰ افکت css را در اختیار شما دوستان اسپادان قرار می دهیم. با ما همراه باشید تا قدرت  css را به شما نشان دهیم.

۱- تصویر سه بعدی

ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای html وcss ایجاد کنیم بدون این که از کد جاوا اسکریپت استفاده نماییم.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="thumb"&gt;
	  &lt;a href="#"&gt;
		    &lt;span&gt;the optimist lives on&lt;/span&gt;
	  &lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

body {
    background: #ddd;
    background: linear-gradient(#ddd, #e8e8e8);
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    margin:0;
}

.thumb {
    width: 400px;
    height: 300px;
    margin: 70px auto;
    perspective: 1000px;
}

.thumb a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("image.jpg");
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}

.thumb:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom;
}
.thumb a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.thumb a span {
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px "Open Sans";
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1;
}
.thumb a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}

.thumb:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}

نتیجه ی کد بالا را می توانید در تصویر زیر مشاهده کنید.

 

افکت css برای تصاویر

 

۲- افکت css برای دکمه ها

قبلاً برای این که به کاربر نشان دهیم کدام قسمت قابل کلیک کردن است، رنگ متن را عوض می کردیم. ولی امروزه با افکت css می توانیم یک دکمه ی زیبا طراحی کنیم.

استایل دهی به دکمه ها (button) به خلاقیت نیاز دارد در این مطلب یک افکت css زیبا برای دکمه ها به نمایش گذاشته شده که کد آن را برای شما قرار می دهیم.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;link  href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" &gt;
    &lt;link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" &gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="pagegradient"&gt;&lt;/div&gt;
    &lt;a class="button"&gt;
        &lt;span&gt;press me&lt;/span&gt;
    &lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

body {
    background: #A7A9AC;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(.34, rgba(230,237,241,.05)),
        color-stop(.67, rgba(230,237,241,0)));
    -webkit-background-size: 5px 5px;
}

#pagegradient {
  background-image:
        -webkit-gradient(
            radial, 
            ۵۰% -۵۰, 
            ۳۰۰, 
            ۵۰% ۰, 
            ۰, 
            from(rgba(230, 237, 241, 0)), 
            to(rgba(230, 237, 241, 0.8)));
    
  height:100%;
  left:0px;
  position:absolute;
  top:0;
  width: 600px;
}

.button {
    position: absolute;
    top: 100px;
    left: 200px;
    display: inline-block;
    margin: 0 auto;
    -webkit-border-radius: 10px; 
    -webkit-box-shadow: 
        ۰px 3px rgba(128,128,128,1), /* gradient effects */
        ۰px 4px rgba(118,118,118,1),
        ۰px 5px rgba(108,108,108,1),
        ۰px 6px rgba(98,98,98,1),
        ۰px 7px rgba(88,88,88,1),
        ۰px 8px rgba(78,78,78,1),
        ۰px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),          
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            ۰% ۱۰۰%, 
            ۱۰۰% ۰%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
        -webkit-box-shadow:
            ۰px -1px #fff, /* top highlight */
            ۰px 1px 1px #FFFFFF; /* bottom edge */
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;   
    display: inline-block;
    padding: 10px 40px 10px 40px;
    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    font-size: 32px;
    
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
        .button span:hover {
            color: #AEBF3B;
            text-shadow: 0px -1px #97A63A;
            cursor: pointer;
        }
        .button:active {
            -webkit-box-shadow: 
                ۰px 3px rgba(128,128,128,1),
                ۰px 4px rgba(118,118,118,1),
                ۰px 5px rgba(108,108,108,1),
                ۰px 6px rgba(98,98,98,1),
                ۰px 7px rgba(88,88,88,1),
                ۰px 8px rgba(78,78,78,1),
                ۰px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .button:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

    .button span:after {
        content: "&gt;";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        right: 14px;
        top: 12px;    
        font-family: 'Cabin';
        font-weight: 700;
        color: #AEBF3B;
        text-shadow: 0px 1px #fff, 0px -1px #97A63A;
        font-size: 26px;
    }

نتیجه به صورت زیر است :

 

افکت css برای دکمه

 

۳- ایجاد صفحه ۴۰۴

یکی از ملاک های گوگل برای سئو سایت ، داشتن صفحه ۴۰۴ می باشد ما در این قسمت یک نمونه کد css برای طراحی صفحه ۴۰۴ قرار دادیم که بتوانید از آن ایده بگیرید.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="hit-the-floor"&gt;404&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

.hit-the-floor {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.hit-the-floor { text-align: center;}
body {background-color: #f1f1f1;
}

نتیجه را در تصویر زیر می توانید مشاهده کنید.

 

افکت css صفحه 404

 

۴- like و dislike

لایک و دیس لایک نظرات یکی از اصلی ترین راه های برقراری ارتباط کاربران با سایت است. بنابراین اگر تصمیم دارید از این امکان در سایت خود استفاده کنید در زیر یک نمونه کد برای استایل دهی به like و dislike قرار داده شده است.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="buttonHolder"&gt;
  &lt;a href="#" class="button tick"&gt;&lt;/a&gt;
  &lt;a href="#" class="button cross"&gt;&lt;/a&gt;
  &lt;a href="#" class="button heart"&gt;&lt;/a&gt;
  &lt;a href="#" class="button flower"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

html, body{
  min-height:100%;
}
body{
  		background-image:-webkit-linear-gradient(top, #edecec, #cecbc9);
			background-image:linear-gradient(top, #edecec, #cecbc9);
}
.buttonHolder{
  margin:80px auto;
  width:400px;
}
.button{
		background-image:-webkit-linear-gradient(top, #f4f1ee, #fff);
		background-image:linear-gradient(top, #f4f1ee, #fff);
		border-radius:50%;
		box-shadow:0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
		float:left;
		height:70px;
		margin:0 30px 30px 0;
		position:relative;
		width:70px;			
		-webkit-transition: all .1s linear;
		transition:all .1s linear;
		}
.button:after{
		color:#e9e6e4;
		content: "";
		display: block;
		font-size: 30px;
		height: 30px;
		text-decoration: none;
		text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
		position: absolute;
		width: 30px;
		}
.heart:after{
			content:"❤";
			left: 21px;
			top: 16px;
		}
.flower:after{
			content:"✿";
			left: 23px;
			top: 14px;
		}
.tick:after{
			content:"✔";
			left:23px;
			top:16px;
		}
.cross:after{
			content:"✖";
			left: 24px;
			top: 15px;
		}
.button:hover{
			background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
			background-image:linear-gradient(top, #fff, #f4f1ee);
			color:#0088cc;
		}
.heart:hover:after{
	
   color:#f94e66;
   text-shadow:0px 0px 6px #f94e66;
		}
.flower:hover:after{
			color:#f99e4e;
			text-shadow:0px 0px 6px #f99e4e;
		}
.tick:hover:after{
			color:#83d244;
			text-shadow:0px 0px 6px #83d244;
		}
.cross:hover:after{
			color:#eb2f2f;
			text-shadow:0px 0px 6px #eb2f2f;
		}
.button:active{
			background-image:-webkit-linear-gradient(top, #efedec, #f7f4f4);
			background-image:linear-gradient(top, #efedec, #f7f4f4);
			box-shadow:0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
		}
.button:active:after{
			color:#dbd2d2;
			text-shadow:0px -1px 1px #bdb5b4, 0px 1px 1px white;
		}

نتیجه به صورت زیر خواهد بود.

 

افکت css

 

۵- منو

هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها  معمولاً با HTML و CSS انجام می شود. در این  مقاله یک منو را آماده کرده ایم که فقط با کدهای css طراحی شده و هیچ گونه کد جاوا اسکریپت داخل آن استفاده نشده است تا در همه ی مرورگر ها بدون هیچ مشکلی نمایش داده شود.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);"&gt;
  &lt;h2&gt;Shift&lt;/h2&gt;
  &lt;nav class="shift"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;صفحه اصلی&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;دانلودها&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;درباره ما&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;تماس با ما&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/section&gt;  
&lt;/body&gt;
&lt;/html&gt;

کد css

body {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
}

small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

h1 {
  text-align: center;
  padding: 50px 0;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
  color: inherit;
  font-size: 40px;
}

h2 {
  text-align: center;
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: inherit;
  padding: 50px;
}

.center {
  text-align:center;
}

section {
  height:100vh;
}

/* NAVIGATION */
nav {
  width:50%;
  margin:0 auto;
  background:#fff;
  padding:50px 0;
  box-shadow:0px 5px 0px #dedede;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display:block;
  padding:15px;
  text-decoration: none;
  color:#aaa;
  font-weight: 800;
  text-transform:uppercase;
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

/* SHIFT */
nav.shift ul li a {
  position:relative;
  z-index: 1;
}
nav.shift ul li a:hover {
  color: #91640F;
}
nav.shift ul li a:after {
  display: block;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F1C40F;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
nav.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
/* Keyframes */
@-webkit-keyframes fill {
  ۰% {
    width: 0%;
    height: 1px;
  }
  ۵۰% {
    width: 100%;
    height: 1px;
  }
  ۱۰۰% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  ۰% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  ۱۰۰% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}

خروجی کد به صورت زیر است.

 

css برای منو

 

۶- افکت css برای تصاویر

در این قسمت یک افکت css زیبا برای تصاویر قرار داده شده است  که وقتی موس را روی تصویر می برید به یک حالت فوق العاده جذاب در می آید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript  در آن ها استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="morph pic"&gt;
  &lt;img src="http://lorempixel.com/300/300/nature/5" alt="beach"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}
.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;  
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}
/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
} 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

اجرای کد بالا به صورت زیر است.

 

css برای تصاویر

 

۷- hover تصاویر

زمانی که نشانگر موس را روی تصویر می برید، یعنی تصویر hover شده است. در این قسمت یک افکت css برای تصویر قرار داده شده است تا زمانی که تصویر hover می شود، تصویر کم رنگ تر شده و یک متن روی آن نمایش داده شود. زمانی هم که موس را از روی تصویر بردارید دوباره می توانید تصویر را به حالت اولیه مشاهده کنید.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; 
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
        &lt;link rel="shortcut icon" href="../favicon.ico"&gt; 
        &lt;link rel="stylesheet" type="text/css" href="style_common.css" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="style1.css" /&gt;
        &lt;link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;      
            &lt;div class="main"&gt;
                &lt;div class="view view-first"&gt;
                    &lt;img src="1.jpg" /&gt;
                    &lt;div class="mask"&gt;
                        &lt;h2&gt;طراحی سایت اسپادان&lt;/h2&gt;
                        &lt;p&gt;طراحی سایت اسپادان&lt;/p&gt;
                        &lt;a href="#" class="info"&gt;بیشتر&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;  
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

کد css

.view {
   width: 300px;
   height: 200px;
   margin:10px 0 0 180px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img{
   display:block;
   position:relative;
}
.view h2 {
   text-transform:uppercase;
   color:#fff;
   text-align:center;
   position:relative;
   font-size:17px;
   padding:10px;
   background:rgba(0, 0, 0, 0.8);
   margin:20px 0 0 0;
}
.view p{
   font-family:Georgia, serif;
   font-style:italic;
   font-size:12px;
   position:relative;
   color:#fff;
   padding:10px 20px 20px;
   text-align:center;
}
.view a.info{
   display:inline-block;
   text-decoration:none;
   padding:7px 14px;
   background:#000;
   color:#fff;
   text-transform:uppercase;
   -webkit-box-shadow:0 0 1px #000;
   -moz-box-shadow:0 0 1px #000;
   box-shadow:0 0 1px #000;
}
.view a.info: hover{
   -webkit-box-shadow:0 0 5px #000;
   -moz-box-shadow:0 0 5px #000;
   box-shadow:0 0 5px #000;
}

.view-first img {
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   -ms-transition:all 0.2s linear;
   transition:all 0.2s linear;
}
.view-first .mask {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   background-color:rgba(219,127,8, 0.7);
   -webkit-transition:all 0.4s ease-in-out;
   -moz-transition:all 0.4s ease-in-out;
   -o-transition:all 0.4s ease-in-out;
   -ms-transition:all 0.4s ease-in-out;
   transition:all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform:translateY(-100px);
   -moz-transform:translateY(-100px);
   -o-transform:translateY(-100px);
   -ms-transform:translateY(-100px);
   transform:translateY(-100px);
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
   -ms-transition:all 0.2s ease-in-out;
   transition:all 0.2s ease-in-out;
}
.view-first p{
   -webkit-transform:translateY(100px);
   -moz-transform:translateY(100px);
   -o-transform:translateY(100px);
   -ms-transform:translateY(100px);
   transform:translateY(100px);
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   -ms-transition:all 0.2s linear;
   transition:all 0.2s linear;
}
.view-first:hover img{
   -webkit-transform:scale(1.1,1.1);
   -moz-transform:scale(1.1,1.1);
   -o-transform:scale(1.1,1.1);
   -ms-transform:scale(1.1,1.1);
   transform:scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
   -ms-transition:all 0.2s ease-in-out;
   transition:all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;
   -webkit-transform:translateY(0px);
   -moz-transform:translateY(0px);
   -o-transform:translateY(0px);
   -ms-transform:translateY(0px);
   transform:translateY(0px);
}
.view-first:hover p{
   -webkit-transition-delay:0.1s;
   -moz-transition-delay:0.1s;
   -o-transition-delay:0.1s;
   -ms-transition-delay:0.1s;
   transition-delay:0.1s;
}
.view-first:hover a.info{
   -webkit-transition-delay:0.2s;
   -moz-transition-delay:0.2s;
   -o-transition-delay:0.2s;
   -ms-transition-delay:0.2s;
   transition-delay:0.2s;
}

خروجی کد

 

hover برای تصاویر

 

۸-  ترکیب انیمیشن و فیلترها

شما می توانید فیلتر های متعدد را  با انیمیشن ها ترکیب کنید و افکت های فوق العاده ای را برای تصاویر ایجاد نمایید. یک نمونه از ترکیب انیمیشن و فیلتر را برای شما قرار داده ایم که شما می توانید کد آن را در زیر مشاهده نمایید.

کد html

&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/foggy-545838_960_720.jpg"&gt;&lt;/body&gt;
&lt;/html&gt;

کد css

body {text-align: center}
img {max-width: 100%;width: 600px;}
img {
  animation: haunted 3s infinite;
}
@keyframes haunted {
  ۰%{filter:brightness(20%);}
  ۴۸%{filter:brightness(20%);}
  ۵۰%{filter:sepia(1) contrast(2) brightness(200%);}
  ۶۰%{filter:sepia(1) contrast(2) brightness(200%);}
  ۶۲%{filter:brightness(20%);}
  ۹۶%{filter:brightness(20%);}
  ۹۶%{filter:brightness(400%);}
}body {
  text-align: center;
}
img{max-width: 100%;width:600px;}
img{animation: haunted 3s infinite;}
@keyframes haunted {
  ۰% {filter: brightness(20%);}
  ۴۸%{filter: brightness(20%);}
  ۵۰%{filter: sepia(1) contrast(2) brightness(200%);}
  ۶۰%{filter: sepia(1) contrast(2) brightness(200%);}
  ۶۲%{filter: brightness(20%);}
  ۹۶%{filter: brightness(20%);}
  ۹۶%{filter: brightness(400%);}
}

خروجی کد

 

افکت css جذاب

 

۹ – تغییر رنگ تصویر به خاکستری با استفاده از css

می توانید با قطعه کد زیر تصاویرتان را به رنگ خاکستری در بیاورید. هرچه مقدار grayscale بیشتر شود، تصویر به رنگ خاکستری نزدیک تر می شود.

img { 
 -webkit-filter:grayscale(100%); 
filter: grayscale(100%);
}

خروجی کد بالا

 

افکت تصاویر

 

۱۰ – چراغ چشمک زن با css

این افکت فوق العاده زیبا به این صورت است که انگار یک چراغ چشمک زن درون متن قرار گرفته است. نکته ی قابل توجه این جاست که این افکت بدون هیچ کد جاوا اسکریپت ایجاد شده است.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="area"&gt; spadan &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
 background: #111;
 font-family: "Open Sans",  Impact;
}
.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur 1.2s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      ۰px 0px 10px #fff, 
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 50px #fff,
      ۰px 0px 50px #fff,
      ۰px 0px 50px #7B96B8,
      ۰px 0px 150px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px -10px 100px #7B96B8,
      ۰px -10px 100px #7B96B8;
  }
}

خروجی کد را می توانید در تصویر مشاهده کنید.

 

افکت جذاب css

 

نتیجه

در این آموزش با ۱۰ افکت css از جمله  سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه ۴۰۴ و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. برای آگاه شدن از دیگر آموزش های طراحی سایت اسپادان به کانال @webyar_net بپویندید.

نوشته ۱۰ افکت css اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

هک رشد (Growth hacking) چیست؟


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

هک رشد (Growth hacking)

هک رشد (Growth hacking) یا خلق رشد یک واژه ی جدید است که در دهه ی اخیر پا به عرصه کسب و کارها گذاشته  و هنوز بسیاری از افراد معنای درست آن را نمی دانند و تصور می کنند هک رشد به معنای بازاریابی است . ولی باید گفت که هک رشد دقیقا نقطه مقابل بازاریابی است. هک رشد شامل تکنیک های زیادی است که باعث می شود سریعتر و راحت تر از روش های بازاریابی ، مشتری و کاربران را جلب کرد و به هدف نهایی رسید . از مهم ترین ویژگی های هک رشد Growth hacking ( خلق رشد ) انعطاف پذیری آن می باشد یعنی فرقی نمی کند که رشد برای یک محصول است یا یک شرکت بزرگ ، همه می توانند از خلق رشد در جهت توسعه کسب و کار خود از آن استفاده نمایند. برای شناخت و کسب اطلاعات بیشتر در مورد هک رشد و تکنیک های هک رشد با اسپادان همراه باشید.

 

هک رشد (Growth hacking) چیست؟

هک رشد (Growth hacking) چیست؟

 

تاریخچه هک رشد

اولین باری که واژه ی هک رشد Growth hacking ابداع شد در سال۲۰۱۰ توسط سین الیس (Sean Ellis) بود . او معتقد بود هکر رشد کسی است که تمام فکر و ذکرش رشد استارتاپ باشد در غیراینصورت او هکر رشد محسوب نمی شود . سین الیس به شرکت های مختلف و استارت آپ های نوپا کمک می کرد تا به کسب وکارشان رونق پیدا کند .او راه حل های اختصاصی  و ایده های مهم را در اختیار مدیران کمپانی ها قرار می داد تا به رشد فوق العاده ای برسند . مشکلات وقتی بوجود می آمد که او میخواست شرکت محل کار خو را ترک کند چرا که باید یک جایگزین برای خود پیدا می کرد ولی رزومه هایی که بررسی می کرد با اینکه رزومه ی افراد باتجربه در حوزه ی بازاریابی بود ولی یک چیزی را کم داشتند . سین الیس (Sean Ellis) بر این باور بود که Growth hacking هک رشد با بازاریابی تفاوت اساسی دارد و اگر مسولیت این کار را به یک بازاریاب بدهد صددرصد نتیجه ی خوبی بدست نمی آورد.

 

هکر رشد کیست؟

برای اینکه معنای هک رشد ( خلق رشد ) را بهتر درک کنید ابتدا باید بدانید هکر رشد کیست و چه کاری انجام می دهد. هکر رشد با خلق روش های جدید سعی دارد تعداد مشتریان و کاربران یک محصول را افزایش دهد.  هکر رشد  هر تصمیمی که می گیرد و هر طرحی که پیاده می کند همه و همه در جهت ایجاد رشد می باشد و هدف منحصر به فرد او فقط و فقط رشد است . یک تصور غلط راجع به هکر رشد این است که هکر رشد باید برنامه نویس باشد! با توجه به اینکه برای رسیدن به اهداف هکر رشد نیاز به برنامه نویسی است اما لازم نیست که خودش برنامه نویس باشد ، فقط کافی است در تیم خود یک برنامه نویس داشته باشد!

 

تکنیک های هک رشد

همانطور که در ابتدای بحث گفتیم هک رشد Growth hacking تکنیک های زیادی دارد که در این بخش به چند تکنیک اساسی هک رشد پرداختیم. امیدواریم که بتوانید از این تکنیک ها برای پیش برد اهدافتان استفاده نمایید و باعث رشد کسب و کار خود شوید.

 

  • تجزیه و تحلیل نیازها و ترجیحات بازار هدف
  • انتخاب مخاطبانی که به تعداد زیادی دنبال کننده متصل اند
  • شناسایی وفعالیت در وب سایت هایی که مخاطبان شما آنجا هستند
  • دنبال کردن دنبال کنندگان رقبا
  • کار و تلاش همیشگی و پایدار

 

نتیجه گیری:

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

نوشته هک رشد (Growth hacking) چیست؟ اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

آموزش Carousel در Bootstrap


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

Carousel   اسلایدری است که برای تصاویر, نوشته­ ها, ویدئو و انیمیشن­ های متحرک به کار می رود. پوسته ی اصلی اسلاید شو ها  تصاویر می باشند. در صفحه تنها می توان از یک Carousel استفاده کرد. با تیم طراحی سایت اسپادان همراه باشید تا با نحوه ی ایجاد یک Carousel در Bootstrap  آشنا شوید.

مثال زیر نشان می دهد که چگونه می توان یک  Carousel  ساده را با استفاده از کد های Bootstrap ایجاد کرد.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.spadan.net/la.jpg" alt="Los Angeles">
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago">
</div>

<div class="item">
<img src="ny.jpg" alt="New York">
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

اسلایدشو برای عملکرد مناسب کنترل های خود  نیاز به یک شناسه (در این مورد id=”myCarousel”) دارد.

 

<div> خارجی

در این کد ” class=”carousel مشخص می کند که این div حاوی   Carousel می باشد. کلاس slide افکت های transition و animation  را اضافه می کند که باعت ایجاد حالت اسلایدی برای عکس ها در هنگام نمایش آیتم های بعدی می شود. ویژگی data-ride=”carousel” به Bootstrap می گوید که بلافاصله پس از بارگذاری صفحات حرکت انیمیشنی Carousel را شروع می کند.

 

بخش  Indicators 

Indicators ها نقطه های کوچکی در پایین هر اسلاید هستند که نشان می دهد چند آیتم در carousel وجود دارد.

Indicators ها در یک لیست مرتب با کلاس .carousel-indicators مشخص می شوند.

خصوصیت data-target به id carousel , اشاره می کند.

خصوصیت data-slide-to مشخص می کند که هنگام کلیک کردن بر روی یک دکمه ی خاص باید به کدام اسلاید بروید.

بخش  Wrapper for slides 

اسلایدرها در <div> با کلاس .carousel-inner مشخص می شوند.

محتویات هر اسلاید در یک <div> با کلاس .item تعریف می شوند . این محتویات شامل متن و عکس می باشد.

کلاس .active باید به یکی از اسلایدرها اضافه شود. در غیر این صورت carousel قابل مشاهده نخواهد بود.

 

بخش Left and right controls 

کد های این بخش دکمه های چپ و راست را به اسلایدشو اضافه می کند که به کاربر اجازه می دهد که به صورت دستی بین اسلایدر ها به عقب و جلو حرکت کند.

خصوصیت data-slide کلمات کلیدی “prev”یا  “next” را می پذیرد و موقعیت اسلاید را بر اساس شرایط کنونی اش تغییر می دهد.

اضافه کردن متن به اسلایدر ها

برای این که برای هر اسلاید یک عنوان و متن داشته باشید باید از کد <div class=”carousel-caption”> را به هر <div class=”item”> اضافه کنید.

کد های زیر یک نمونه اسلاید شو را به همراه Caption نشان می دهد.

<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="http://www.spadan.net/la.jpg" alt="Chania">
<div class="carousel-caption">
<h3>Los Angeles</h3>
<p>LA is always so much fun!</p>
</div>
</div>

<div class="item">
<img src="chicago.jpg" alt="Chicago">
<div class="carousel-caption">
<h3>Chicago</h3>
<p>Thank you, Chicago!</p>
</div>
</div>

<div class="item">
<img src="ny.jpg" alt="New York">
<div class="carousel-caption">
<h3>New York</h3>
<p>We love the Big Apple!</p>
</div>
</div>
</div>

<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>

آموزش Carousel در Bootstrap

در نهایت پس از تشکر از همراهی شما عزیزان لازم به ذکر است اگر برای  ایجاد یک اسلایدشو در Bootstrap یا دیگر موضوعات آن دچار مشکل شدید می توانید سوالات خود را با ما در میان بگذارید . برای دریافت آموزش های بیشتر می توانید به اسپادان مراجعه کنید.

نوشته آموزش Carousel در Bootstrap اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

استفاده صحیح از ویدئو در سایت


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

استفاده صحیح از ویدئو در سایت

قرار دادن ویدئو در سایت

امروزه ویدئوها محبوبیت ویژه ای دارند و از آسان ترین راه های ارتباط با مخاطبان محسوب می شوند. با قرار دادن ویدئو در سایت می توانید شاهد جذب مخاطبان بیشتر در سایت تان باشید. کاملاً واضح است که در صورت استفاده صحیح از ویدئو در سایت زمان حضور مخاطبان در سایت شما افزایش می یابد. البته باید مراقب باشید تا صدمه ای به عملکرد سایت نزنید و باعث کاهش سرعت سایت نشوید. گاهی اوقات آن طور که با یک ویدئوی چند دقیقه ای می توانیم منظورمان را به مخاطب برسانیم با نوشتن چند صفحه نمی توان این کار را انجام داد.
اکنون این سوالات مطرح است، قراردادن ویدئو در سایت می تواند در سئو سایت موثر باشد؟ چگونه از ویدئو در سایت استفاده کنیم تا سرعت سایت کاهش پیدا نکند؟

برای پاسخ به این سوالات با تیم طراحی سایت اسپادان همراه باشید و این مقاله را حتماً تا آخر بخوانید چرا که استفاده صحیح از ویدئو در سایت امری بسیار ضروری است.

نحوه ی قرار دادن ویدئو در سایت

برای قرار دادن ویدئو در سایت دو روش وجود دارد روش اول این که ویدئو را در هاست سایت بارگذاری کنید و در مکانی که می خواهید ویدئو را نمایش دهید از تگ video استفاده کنید. کد آن به صورت زیر می باشد.

<video controls>
<source src="http://www.spadan.net/img/tt.mp4" type="video/mp4">
<source src="img/tt.ogg" type="video/ogg">
Your browser does not support the video tag.
<video/>

ویژگی controls دکمه های پخش و تنظیم صدا را به ویدئو اضافه می کند تا کاربران به کمک آن بتوانند ویدئو را پخش یا متوقف کنند.  در تگ source قسمت src آدرس ویدئو را قرار دهید و در قسمت type  نیز فرمت ویدئو را مشخص کنید. مثلا اگر فرمت فیلم شما wmv است این گونه بنویسید:

type="video/wmv"

اما استفاده از این روش به دلیل این که فیلم رو در هاست تان می گذارید توصیه نمی شود چرا که باعث کاهش سرعت سایت می شود. در ادامه همراه ما باشید تا شما را با روش استفاده صحیح از ویدئو در سایت آشنا کنیم.

آپلود ویدئو در آپارات

روش دیگر برای قرار دادن ویدئو در سایت، آپلود ویدئو در آپارات است. شما می توانید ویدئوهایی را که می خواهید در سایت تان نمایش دهید در سایت آپارات آپلود کنید. سپس کد نمایش ویدئو را از آپارات دریافت کنید و در سایت خود بگذارید. در این صورت شما بدون این که سرعت سایت خود را کاهش دهید می توانید با پخش ویدئو زمان حضور کاربران را در سایت خود افزایش دهید. زمانی که حضور کاربران در سایت شما طولانی شود گوگل تشخیص خواهد داد و رتبه ی سایت شما افزایش پیدا می کند.

 

استفاده صحیح از ویدئو در سایت

 

 

در واقع می توان گفت که یکی از راه های بسیار مهم برای افزایش میلیونی بازدیدکنندگان سایت، آپلود ویدئو در آپارات و یوتیوب است. چرا که این امکان وجود دارد که کاربر پس از مشاهده ویدئو وارد سایت شما شود که این موضوع بهترین راه رسیدن به هدف (جذب مخاطب بیشتر) است.

شما می توانید قسمتی از ویدئو را در آپارات قرار دهید و کاربر را برای نمایش ادامه ی فیلم و توضیحات بیشتر به سایت خود دعوت نمایید. این روش در زمان بسیار کمی تعداد کاربران سایت شما را افزایش می دهد و سئوی سایت شما را نیز تحت تاثیر قرار خواهد داد.

نکات مهم برای قرار دادن ویدئو در سایت

در صورتی که می خواهید در سایت تان ویدئو قرار دهید به نکات زیر دقت کنید.

انتخاب عنوان مناسب برای ویدئو

سعی کنید در عنوان ویدئو از کلمات کلیدی استفاده کنید. همین طور در نظر داشته باشید که طول عنوان مناسب باشد.  به طور تقریبی ۵ کلمه طول مناسبی برای عنوان است. رعایت این موارد در سئو سایت موثر است.

توضیحات برای ویدئو

برای ویدئو طبق گفته ی گوگل بهتر است حداقل از ۲۵۰ کارکتر برای توضیحات استفاده کنید. این توضیحات  شامل خلاصه ای از ویدئو است که برای کاربران بسیار مفید است و همین طور می تواند شامل آدرس وب سایتی باشد که ویدئو را ارائه کرده است.

هماهنگی متن با ویدیو

اگر قرار است روی ویدئو پس زمینه متنی نمایش داده شود، باید قابل خواندن باشد.  مطمئن شوید که متن و ویدئو خیلی با هم متضاد نباشد و چشم کاربر را اذیت نکند.

حجم ویدئو

زیاد بودن حجم  ویدئو زمان بارگذاری سایت را بالا می برد پس باید تا حد امکان ویدئو را فشرده کنید ولی این را بدانید که نباید سرعت را قربانی کیفیت کنید. فیلمی انتخاب کنید که دارای حجم کم و کیفیت خوبی باشد. طول ویدئو بهتر است بین ۳۰ الی ۴۰ ثانیه باشد تا کاربر را اذیت نکند و سعی کنید حجم ویدئو نیز بیش از ۲مگابایت نباشد.

نمایش ویدئو در دستگاه های متفاوت

ویدئو را به صورت ریسپانسیو در سایت خود قرار دهید تا کاربران در تمام دستگاه ها بتوانند ویدئو را به درستی مشاهده نمایند.

 

ویدئو ریسپانسیو

عدم نمایش ویدئو در حلقه

دربعضی از سایت ها می بینید که ویدئوها پشت سرهم به طور خودکار اجرا می شوند. این کار باعث آسیب زدن به cpu ی دستگاه کاربران می شود و سرعت صفحات دیگر را پایین می آورد. بنابراین اگر قصد استفاده از ویدئو در سایت را دارید اجرای ویدئو را به اختیار کاربران قرار دهید.

نتیجه گیری

استفاده از ویدئو در سایت اهمیت زیادی دارد اما اگر با روش استفاده صحیح از ویدئو در سایت آشنا نباشید  و به روش نامناسب ویدئو را در سایت خود قرار دهید می تواند مشکلات زیادی برای لود سایت ایجاد کند. در این مقاله نحوه استفاده صحیح از ویدئو در سایت آموزش داده شد. با استفاده از روش گفته شده و رعایت نکات برای قرار دادن ویدئو می توانید تاثیر مثبتی در سئو سایت خود بگذارید. برای آگاه شدن از دیگر آموزش های طراحی سایت اسپادان به کانال اسپادان @webyar_net بپیوندید.

نوشته استفاده صحیح از ویدئو در سایت اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

امکانات و تغییرات در وردپرس ۴٫۹


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

wordpress 4.9.4

وردپرس ۴٫۹

وردپرس یک سیستم مدیریت محتوای قدرتمند برای سایت ها است. وردپرس ۴٫۹ در حال حاضر به صورت رسمی منتشر شده و امکان استفاده و بروزرسانی به این نسخه برای عموم کاربران فراهم شده است. اگر هنوز فرصت نکرده اید سایت خود را به این نسخه ارتقا دهید، توصیه میکنیم هر چه سریعتر به این نسخه جالب و پر از امکانات مهاجرت نمایید. حال می پردازیم به امکانات و تغییرات در وردپرس ۴٫۹ .

 

تغییرات وردپرس ۴٫۹

اضافه شدن ابزارک برای گالری تصویر

در نسخه قدیم وردپرس ۴٫۸ ابزارک های ویدیویی،صوتی،تصویری به وردپرس افزوده شد اما در نسخه جدید وردپرس ۴٫۹ ابزارک گالری تصاویر نیز اضافه شده است که شما به راحتی میتوانید یک گالری تصویر برای خودتان درست کنید. و  شما می توانید توسط این گالری یک گالری ساده در وردپرس را بسازید.

 

امکانات و تغییرات در وردپرس 4.9

امکانات و تغییرات در وردپرس ۴٫۹

 

افزودن یا اضافه کردن دکمه رسانه ها در ابزارک متن

از آنجای که می دانید در نسخه وردپرس ۴٫۸، ویرایشگر دیداری به ابزارک متن اضافه گردید. و اگر می خواستید به متن تصویری اضافه کنید، باید کد html آن را می نوشتید.

ابزارک متنی وردپرس یکی از امکاناتی است که طرفداران وردپرس مدت زیادی در انتظار آن بودند.

شایان ذکر است توسعه دهندگان وردپرس این موضوع را هم در نظر گرفته اند که در حال حاضر سایتهای زیادی که از وردپرس استفاده می کنند، تغییراتی را برای افزودن امکان استفاده از کدکوتاه به ابزارک متنی، در سایت خود اعمال کرده اند.  بنابراین این ویژگی به نحوی به وردپرس ۴٫۹ اضافه شده است که اگر کاربری بیشتر چنین تغییری را نیز در سایت خود اعمال کرده باشد، تداخلی در سایت شخص ایجاد نشده و کاربر با مشکلی مواجه نخواهد شد.

 

امکانات اضافه شده به وردپرس 4.9

امکانات اضافه شده به وردپرس ۴٫۹

 

ذخیره و تغییرات قالب در بخش سفارش سازی

در وردپرس جدید ۴٫۹ امکان سفارشی سازی هر تغییر و تنظیمی که شما می توانید تغییرات خود را به صورت پیش نویس ذخیره کنید و تنها خودتان تغییرات را مشاهده کنید و یا یک زمانبندی برای اعمال تغییرات قالب وردپرس در نظر بگیرید که پس از آن تاریخ تغییرات لحاظ شود.

یکی دیگر از امکانات بخش سفارش سازی این است که پیش نمایش تغییرات خود را با یک URL یا آدرس به اشتراک بگذارید و این آدرس را برای کاربر دلخواه خود ارسال کنید تا پیش نمایش تغییرات در بخش سفارش سازی قالب مشاهده کنند.

 

امکانات اضافه شده wordpress 4.9

امکانات اضافه شده wordpress 4.9

ویرایش و بهبود کد CSS در بخش ویرایشگر

 

در نسخه وردپرس ۴٫۹ ویرایشگر کدنویسی بهبود یافته است  CSS های اضافی در تغییراتی صورت گرفته است، یک ویرایشگر پیشرفته در اینجا مانند دیگر ویرایشگرها اضافه شده و نیز امکان  اینکه کدها را به صورت هایلایت در اختیار شما قرار می دهد.

از جمله امکانات و ویژگی های  که در نسخه وردپرس ۴/۹ در بخش ویرایشگر آمده است به شرح زیر می باشد:

  • بهتر شدن ویرایشگر CSS در بخش سفارشی سازی قالب وردپرس
  • اعلام هشدار های مناسب و مقتضی پیش از اعمال تغییرات در کدها
  • پیام های هشداری در زمان ویرایش قالب ها و افزونه ها، حتی در زمانی که قالب یا افزونه مورد نظر در سایت فعال نباشد.
  • بهبود تجربه کاربری در ویرایش کد ها
  • بهتر شدن ویرایشگر افزونه ها و قالب ها

 

قابلیت جدیدی که در نسخه وردپرس ۴٫۹ اعمال گردیده ، استفاده از sandbox است. با این امکان، زمانی که وردپرس در کدی که نوشته اید به خطایی برخورد کند، این خطا را پیش از ذخیره به شما اطلاع میدهد. که تا حد امکان از اتفاق افتادن صفحه سفید و مواردی از این دست جلوگیری می کند.

 

بروزرسانی وردپرس 4.9.4

بروزرسانی وردپرس ۴٫۹٫۴

 

جمع بندی

وردپرس به صورت منظم در حال بروز رسانی است که این خود یک امر ضروری در برقراری امنیت سایت و آرامش خاطر کاربرانش می باشد. با روند به روز شدن وردپرس و روی کار آمدن نسخه جدید ۴٫۹٫۴ وردپرس، افزونه ها و امکانات جدیدی در نسخه وردپرس ۴٫۹٫۴ به آن اضافه شده است. از این رو قبل از هر گونه بروز رسانی وردپرس خود ، حتما از سایت خود نسخه ی پشتیبان (بک آپ) تهیه نمایید تا در هنگام بروز هر گونه مشکلات احتمالی ، فورا آن را حل کنید. تیم اسپادان با بک آپ هفتگی از سایت های مشتریان و بروز رسانی سایت ها ، امنیت خاطر را برای مشتریان خود فراهم می آورد.

لذا حرفه ای بودن وبسایت بستگی به عملکرد و انتخاب درست شما دارد. آموزش های بعدی اسپادان را در کانال تلگرام اسپادان @spadan پیگیری نمایید.

نوشته امکانات و تغییرات در وردپرس ۴٫۹ اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

چگونگی از بین بردن border تصاویر در برخی از مرورگرها


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

از بین بردن border تصاویر در برخی از مرورگرها

border تصاویر در برخی از مرورگرها

برخی از مواقع هنگامی که شما یک تصویر را بر روی یک صفحه­ ی وب لینک می دهید ، بعضی از مرورگرهای وب به­ طور خودکار یک حاشیه در اطراف تصویر اضافه می­کنند. در این مقاله به معرفی روش­ هایی می­پردازیم که با استفاده از آن­ها بتوانیم این border تصاویر را از بین ببریم و یا ایجاد کنیم. برای چگونگی از بین بردن border تصاویر در برخی از مرورگرها ، دو روش مختلف css  وجود دارد.

چگونگی از بین بردن border دور عکس ها

چگونگی از بین بردن border دور عکس ها

از بین بردن border تصاویر

در روش اول می­توان  css ,style را به­ صورت داخلی به تگ img اضافه کرد. لذا برای از بین بردن border تصاویر باید مقدار ,attribute border تگ img را صفر و یا none در نظر گرفت.

<a href="http://www.spadan.net/#" target="_blank">
<img src="http://www.spadan.net/#" alt="example of image without a border" style="border: 0 or none;"> 
</a>

 

با توجه به این­که روش اول (inline styles) مدت زمان زیادی است که دیگر استفاده نمی­شود ، امروزه بهتر است برای نوشتن یک  style  از یک external stylesheet به جای اضافه کردن style به­ صورت مستقیم به تگ­ های html استفاده کرد. بنابراین برای از بین بردن border تصاویر ،  یک فایل با نام style.css ایجاد کرده و کد زیر را به آن اضافه می کنیم.

a img { border: 0; }

یا

a img { border: none ; }

حال باید stye.css به فایل html لینک شود تا محتویات نوشته شده در آن به محتویات فایل html اعمال گردد.

قرار دادن border برای تصاویر

در گذشته برخی از مرورگرها به­ طور خودکار یک border در اطراف تصاویر لینک شده اضافه می­کردند, اما امروزه اکثر مرورگرهای مدرن این عمل را کاهش داده­اند. حال اگر می­خواهید یک border در اطراف تصاویر پیوند اضافه کنید باید به­ صورت دستی style مربوطه را وارد نمایید. در این مقاله سه روش برای اضافه کردن border به یک تصویر لینک­ شده توضیح داده­ شده است. بهترین راه برای انجام این کار این است که از یک external style sheet استفاده کنید.

 

Inline Style

اولین روش برای اعمال border به تصاویر ، استفاده از روش inline styling استکه قبلا برای از بین بردن border تصاویر استفاده شد. با این حال در این مورد به جای حذف border تصاویر ، از یک Inline Styling برای ایجاد یک border استفاده می کنیم.

<a href="http://www.spadan.net/#"><img src="http://www.spadan.net/#"  style="border: 2px blue dashed;   border-radius: 10px; padding: 5px;"  alt="image description"> </a>

HTML Style Element

راه دوم برای رسیدن به همان نتیجه استفاده از HTML style element است. این روش شامل نوشتن css style و قرار دادن آن­ها در head element می­باشد. مزیت این روش این است که اگر بیش از یک تصویر در صفحه وجود داشته باشد style به­ طور خودکار به تمام تصاویر اعمال گردد.

<style> a img { border: 2px blue dashed;   border-radius: 10px;  padding: 5px; } </style>

External Style Sheet

سومین راه و بهترین راه استفاده از یک external style sheet است. با اضافه کردن style به یک external style sheet می­توانیم style ها را به تعداد نامحدود از اسناد html اعمال نماییم.

a img {  border: 2px blue dashed;  border-radius: 10px;  padding: 5px;  }

لذا کد بالا را در یک فایل ساده­ ی متنی تایپ نموده و با نامی مانند style.css ذخیره می کنیم. سپس فایل style.css تگ لینک زیر به سند html خود پیوند می دهید.

<link rel="stylesheet" type="text/css" href="styles.css">

 

پایان

در این مقاله راه حل هایی بیان شد که برای چگونگی از بین بردن border تصاویر در برخی از مرورگرها کاربرد داشت. از توجهی که به این مقاله نمودید سپاسگذاریم و برایتان آرزوی موفقیت بیشتر داریم.

برای دریافت آموزش های بیشتر به کانال اسپادان @webyar_net بپیوندید.

نوشته چگونگی از بین بردن border تصاویر در برخی از مرورگرها اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

طراحی فروشگاه اینترنتی


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

فروشگاه اینترنتی حرفه ای

فروشگاه اینترنتی

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

 

طراحی فروشگاه اینترنتی

 

مزایای فروشگاه اینترنتی

افزایش فروش

شما ممکن است برخی از بودجه­ ی کسب­ و کار خود را برای رسیدن به مشتریان جدید اختصاص دهید. برای مثال برای تبلیغات در مجلات و روزنامه ­ها یا رادیو و تلویزیون هزینه کنید. اما همان طور که واضح است مزیت فروشگاه آنلاین این است که شما می­ توانید مشتریان بیشتری را جذب کنید. با داشتن یک فروشگاه اینترنتی، شما می­توانید به مشتریانی در سراسر کشور و حتی در قاره ­های دیگر دسترسی پیدا کنید.

عدم نیاز به حضور در فروشگاه:

فروشگاه­ هایی که به­ صورت آنلاین فعالیت می­ کنند محدودیت زمان فعالیت ندارند. در واقع مزیت فروشگاه­ های اینترنتی این است که این فروشگاه­ ها به­ صورت شبانه ­روزی فعالیت می­ کنند و افراد در هر ساعت از شبانه­ روز که بخواهند می­ توانند از این فروشگاه ها محصول مورد نظر خود را خریداری نمایند.

کاهش هزینه­ ها:

به­ طور کلی راه ­اندازی فروشگاه اینترنتی ارزان­ تر از راه ­اندازی و اجرای یک فروشگاه فیزیکی می­ باشد. اگرچه ایجاد یک فروشگاه اینترنتی مستلزم دانش، تخصص فنی و سرمایه­ گذاری مستمر است.

مراحل طراحی فروشگاه اینترنتی

تعیین محصول یا محصولاتی که خواستار فروش آن هستید

در قدم اول برای طراحی یک فروشگاه اینترنتی باید نوع محصول یا محصولاتی که می­­ خواهید به­ صورت آنلاین بفروش برسانید را مشخص کنید. برای تعیین این­ که چه محصولی برای فروش مناسب است باید ابتدا توانایی و علایق خود را بررسی کنید. سپس باید بررسی کنید که کالای مورد نظر شما در بازار هنوز اشباع نشده باشد. چون در غیر این­ صورت کار فروش سخت می ­شود.

بررسی بازار و رقبا

باید لیستی از تمام رقبای خود که کالای مورد نظر شما را به­ صورت اینترنتی می­ فروشند تهیه کنید و سپس باید به بررسی نقاط قوت و ضعف آن ­ها بپردازید تا مشخص شود که در این زمینه چقدر باید هزینه کنید. در ضمن باید مشخص شود که آیا مشتریان تمایلی دارند کالای موردنظر شما را به­ صورت اینترنتی خریداری نمایند؟

تعیین بازار هدف

در این مرحله باید مشتریان هدف مشخص شوند. باید مشخص شود که چه افرادی خواستار خرید محصولات شما هستند. محدوده­ ی سنی مشتریان شما چیست. این افراد برای خرید کالای شما چقدر هزینه می­ کنند. این افراد عمدتاً در چه مشاغلی فعالیت می­ کنند. هرچقدر تعداد این سوالات بیشتر شود، شما شناخت بهتری از مشتریان خود پیدا می­ کنید.

تبلیغات و بازاریابی

در این مرحله بعد از تعیین نوع محصولی که می­ خواهید به مشتریان خود عرضه کنید، باید به تدوین یک برنامه برای تبلیغات و بازاریابی در فضای مجازی، شبکه­ های اجتماعی و اینترنت بپردازید. این مرحله شامل تعیین نام دامنه­­ ای مناسب برای فروشگاه اینترنتی، طراحی لوگو، تهیه­ ی برنامه ­ای برای بهینه­ سازی فروشگاه در موتورهای جستجو، تبلیغات به­ صورت فیزیکی و مجازی، معرفی محصول در شبکه­ های اجتماعی، تولید محتوا و غیره است. برای  اجرای هرکدام از این برنامه­ ها حتماً از یک متخصص کمک بگیرید.

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

انتخاب نوع زبان برنامه­ نویسی برای طراحی سایت
انتخاب یک سیستم مدیریت محتوا (cms)، یک سیستم مدریت محتوا امکانات لازم برای طراحی سایت را در اختیار برنامه نویس قرار می­ دهد.
طراحی ظاهر سایت و صفحات آن
کدنویسی صفحات طراحی شده
دریافت نماد اعتماد الکترونیکی از اهمیت بسیاری برخوردار است. زیرا دریافت درگاه پرداخت بانکی بدون نماد اعتماد الکترونیکی امکان­ پذیر نیست و همچنین این نماد باعث اعتماد بیشتر کاربران به فروشگاه اینترنتی می­ شود.
قدم بعدی تهیه­ ی چند درگاه مطمئن بانکی می­ باشد.

 

امکانات فروشگاه اینترنتی

سبد خرید
نماد اعتماد الکترونیکی
امکان جستجو در سایت
لوگوی مناسب
ارائه ­ی توضیحات برای هرکدام از محصولات
دسته ­بندی محصولات براساس رنگ، مدل، برند محصول و ..
سرویس­ های پشتیبانی از مشتریان
ایمیل مارکتینگ و ارسال آخرین اخبار در مورد محصولات برای مشتریان
درنظر گرفتن تخفیف برای محصولات
نمایش پرفروش­ترین ، پربازدیدترین محصولات و محصولات ویژه
استفاده از شبکه­ های اجتماعی و متصل بودن فروشگاه به شبکه­ های اجتماعی
ارسال کالا به روش­ های مختلف برای مشتریان
استفاده از درگاه­ های پرداخت
طراحی جذاب و کاربرپسند
امکان ارسال نظرات، پیشنهادات و انتقادات کاربران
امکان مقایسه­ ی محصولات
قرار دادن تصاویر با کیفیت مناسب برای محصولات
امنیت
طراحی ریسپانسیو و واکنش­گر
ایجاد بخشی برای عضویت در سایت
حمل و نقل رایگان یا رقابتی
بارگذاری سریع برای هر صفحه
لیست محصولات مورد علاقه
بخش محصولات مرتبط
بخش سوالات متداول
اطلاعاتی درمورد نحوه تحویل کالا
ایجاد بخشی با عنوان تماس با ما
تضمین بازگشت کالا

 

در این مقاله با فروشگاه اینترنتی آشنا شدید اگر قصد راه اندازی یک فروشگاه اینترنتی را دارید حتماً با متخصصین در زمینه ی طراحی سایت مشورت نمایید تا با شکست مواجه نشوید. متخصصان تیم اسپادان با دانش و تجربه ی کافی و کارآمد در زمینه ی طراحی فروشگاه اینترنتی و سئو سایت آماده ی مشاوره به شما عزیزان می باشند.

نوشته طراحی فروشگاه اینترنتی اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت