دکمه ادامه مطلب زیبا و متفاوت به سبک پلنگ (هاور عکس)

[Mahdi Askari]

img hover by palang V1.2



​

سلام خدمت یکایک عزیزان و دوستداران کدنویسی نوین:خنده1:

چندی پیش خبر از ارائه کدی برای شما عزیزان دادم که مشابه رابط کاربری مترو باشد ( استارت ویندوز 8)

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

تصمیم گرفتم این کد رو براتون بذارم

زیبایی در عین ظرافت و جاداری:خنده1: (یخچال فریزر امرسان) از ویژگی های این کد هست

همچنین تمام سی اس اس بودن و پیاده سازی بر اساس متد HTML5

خب حرف برای گفتن زیاده و بهتره که سخن کوتاه کنیم

برای دیدن نمونه زنده به لینک زیر بروید:
http://mahdiaskari.ir/theme/hover
(با ماوس روی عکس برید)

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

figure {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

figure > div {
    overflow: hidden;
}

a {
    color: rgb(101, 177, 101);
    text-decoration: none;
}

figure img {
    -webkit-transition: -webkit-transform 0.4s;
    -moz-transition: -moz-transform 0.4s;
    transition: transform 0.4s;
}

a:hover, a:focus, a:active {
    color: rgb(39, 71, 39);
}

figure:hover img, figure.cs-hover img {
    -webkit-transform: translateX(25%);
    -moz-transform: translateX(25%);
    -ms-transform: translateX(25%);
    transform: translateX(25%);
}

figcaption {
  height: 100%;
    width: 40%;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: rotateY(-90deg);
    -moz-transform: rotateY(-90deg);
    transform: rotateY(-90deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s;
    transition: transform 0.4s, opacity 0.1s 0.3s;
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 0px 20px;
    background: none repeat scroll 0% 0% rgb(57, 168, 57);
    color: rgb(237, 78, 110);
}

figcaption h3 {
    margin: 20px 0px 0px;
    padding: 0px;
    color: rgb(255, 255, 255);
    line-height: 1;
    font: 22px b yekan;
    
}

figcaption a {
    text-align: center;
    padding: 5px 10px;
    border-radius: 2px 2px 2px 2px;
    display: inline-block;
    background: none repeat scroll 0% 0% rgb(255, 255, 255);
    color: rgb(33, 109, 33);
position: absolute;
bottom: 20px;
font:13px b yekan;
}

figure:hover figcaption, .cs-style-4 figure.cs-hover figcaption {
    opacity: 1;
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    transform: rotateY(0deg);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
    -moz-transition: -moz-transform 0.4s, opacity 0.1s;
    transition: transform 0.4s, opacity 0.1s;
}

خب پس از اضافه کردن کدهای CSS نوبت میرسه به اضافه کردن کد های HTML
برای این منظور کد های زیر را به هر قسمت سایت خود که لازم داریم اضافه کنید

<div style="display: inline-block;
text-align: left;
position: relative;
margin-bottom: 20px;perspective: 1700px;
perspective-origin: 0px 50%;">
<figure>
<div class="boximage">
<a>
<img src="http://www.up.iranjoman.com/images/63p2jjws6s3rpja9s6pj.jpg"></img>
</a>
</div>
<figcaption>
<h3>
ایران انجمن
    </h3><a href="/">
       ادامه نوشته 
    </a></figcaption></figure></div>

ویرایش کد ها و تنظیم اون بر اساس رنگ مورد نظر بسیار آسان هست
باز هم در صورت مشکل بگید تا کمک کنیم

کد <a href="/"> رو در قسمت HTML پیدا کنید و آدرسی که دکمه ادامه مطلب میخواد به اون بره رو بهش بدید
نکته: فونت های به کار رفته در این نمونه از روی سیستم کاربر فراخوانی میشوند و اگر خاصیت فونت فیس درون سایت خود دارید حتما فونت ها را ویرایش کنید:گل:

موفق باشید:گل:

کپی مطلب با ذکر نام ایران انجمن مجاز هست:گل:

 

[@afsane@]

سلام...من پروژه دارم و باید 5شنبه تحویل بدم اصلا هم وقت ندارم بشینم پاش و موضوع اصلی اینه که بلد نیستم...فعلا فقط قالب سایت رو استاد خواسته ازم... ممنون میشم کمکم کنید...اگه میشه به ایمیلم ارسال کنید...:خجالت2::خجالت2::خجالت2: