رفتن به مطلب

درخواست آموزش استفاده از استایل های CSS


پست های پیشنهاد شده

سلام

می خواستم بدونم چجوری میشه از استایل های CSS مانند استایل زیر استفاده کرد:


.modern {
display: inline-block;
margin: 10px;
padding: 8px 15px;
background: #B8ED01;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 4px;
transition: all 0.3s ease-out;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2);
/* Font styles */
text-decoration: none;
text-shadow: 0 1px rgba(255,255,255,0.7);
}
.modern:hover { background: #C7FE0A; }
.embossed-link {
box-shadow:
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.17),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link {
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.5),
0 2px 2px rgba(0,0,0,0.3),
0 0 4px 1px rgba(0,0,0,0.2),
inset 0 3px 2px rgba(255,255,255,.22),
inset 0 -3px 2px rgba(0,0,0,.15),
inset 0 20px 10px rgba(255,255,255,.12),
0 0 4px 1px rgba(0,0,0,.1),
0 3px 2px rgba(0,0,0,.2);
}
.modern.embossed-link:active {
box-shadow:
inset 0 -2px 1px rgba(255,255,255,0.2),
inset 0 3px 2px rgba(0,0,0,0.12);
}
.socle {
position: relative;
z-index: 2;
}
.socle:after {
content: "";
z-index: -1;
position: absolute;
border-radius: 6px;
box-shadow:
inset 0 1px 0 rgba(0,0,0,0.1),
inset 0 -1px 0 rgba(255,255,255,0.7);
top: -6px; bottom: -6px;
right: -6px; left: -6px;
background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}

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

این آدرس سایتم: www.didebani.com

ممنون میشم کمکم کنید !!!

لینک به ارسال

سلام

با استفاده از این کد های HTML :


<div class="demo-wrapper">
<a href="#" class="modern">Modern</a>
<a href="#" class="modern embossed-link">Modern embossed</a>
<a href="#" class="modern socle">Modern with socle</a>
</div>​

آنلاین ببینید:


http://jsfiddle.net/nEuC4/

ویرایش شده توسط سعید
لینک به ارسال

ابتدا css را در استایل ریختم بعدش هم کد html هم بالای سایدبار قرار دادم ولی فقط نوشته میاد و لینکش !! خود دکمه نیست !!!! چرا؟؟؟

خودتون ببینید:

http://www.didebani.com/page/3/

لینک به ارسال

جدیدترین ویدیوها خودش از قبل بوده سمت چپش نگاه کنید میبینید نوشته ModernModern embossedModern with socle

این همون کده که فقط نوشته است و اثری از دکمه نیست !!!

ویرایش شده توسط hostiranco
لینک به ارسال

طبق کدی که در پست 2 سعید عزیز زده همین هست.

دکمه چی باید نمایش داده بشه؟

لینک به ارسال

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

لینک به ارسال

ابتدا css را در استایل ریختم بعدش هم کد html هم بالای سایدبار قرار دادم ولی فقط نوشته میاد و لینکش !! خود دکمه نیست !!!! چرا؟؟؟

خودتون ببینید:

http://www.didebani.com/page/3/

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

کد های html را دوباره بذارید و استایل هم بدید بهش و لینک بدید استایلشو ببینم.

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

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

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...