Overflow

تکنیک های CSS

1 پست در این موضوع قرار دارد

سلام به همه دوستان عزیز تو این تاپیک قصد دارم یک سری از کد های کاربردی برای طرحی قالب رو قرار بدم

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

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

اولین مثال که میخوام بزنم ایجاد روبان با استفاده از CSS3

به عکس زیر توجه کنید :

84706933513907361405.jpg

بنابرین شما در این مثال یاد میگیرید چگونه روبان ایجاد کنید بدون هیچگونه تصویر و حداقل نشانه گذاری HTML

HTML CODE

<html>
<head>
<title></title>
<link href="2.css" type="text/css" rel="stylesheet"></link>
</head>

<body>
<div id="wrapper">
<div id="box">

<h1>WP-Parsi</h1>
</div><!-- ./box -->
</div><!-- ./wrapper -->
</body>
</html>

CSS Code

#wrapper{
position: relative;
margin:0 auto 0 auto;
padding: 75px 0px 0px 0px;
width: 500px;
}
#box{
width: 400px;
padding: 20px;
border: 2px solid black;
border-radius:8px;

}

h1{
text-align: center;
position: relative;
color: #fff;
margin: 0 -30px 30px -30px;
padding: 10px 0;
text-shadow: 0 1px rgba(0,0,0,.8);
background: #5c5c5c;
background-image: -moz-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -webkit-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -o-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: -ms-linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
background-image: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,0));
-moz-box-shadow: 0 2px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.3);
box-shadow: 0 2px 0 rgba(0,0,0,.3);
}

h1:before, h1:after
{
content: '';
position: absolute;
border-style: solid;
border-color: transparent;
bottom: -10px;
}

h1:before
{
border-width: 0 10px 10px 0;
border-right-color: #222;
left: 0;
}

h1:after
{
border-width: 0 0 10px 10px;
border-left-color: #222;
right: 0;
}

17

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط reza_yki
      سلام به همه اساتید و دوستان گرامی
      من قالبی طراحی کردم که به نظرم ارزش لایسنس گذاری رو داره و نزدیک 3-4 ماه روش وقت گذاشتم
      من از افزونه EDD برای فروش استفاده میکنم ولی افزونه یا کدی رو پیدا نکردم که بتونم قالب رو فقط بشه روی یه دامنه فعال کرد و نشه قالب رو برای چند بار نصب و استفاده کرد
      یه افزونه برای EDD هست ولی پولیه وگرونم هست و فعلا نمی تونم بخرمش
      کسی هست  منو راهنمایی کنه؟ ممنون از همه
    • توسط unid_user
      سلام و درود
      دوستان گرامی ، چطوری میشه تگ های a رو به صورت داینامیک آدرس دهی کرد. من به هر کدام از تگ ها یک تصویر background دادم و حالا میخوام آدرس تگ ها رو داینامیک کنم.
      کد html :
      <div class="test"> <a id="telegram" href="#"></a> <a id="instagram" href="#"></a> <a id="whatsapp" href="#"></a> </div> با تشکر و سپاس

    • توسط masoudmosleh267
      سلام دوستان عزیز. امیدوارم که حالتون خوب باشه. من میخوام جایگاه توضیحات دسته بندی محصولات که تو پوسته بالای محصولات نشون میده رو ببرم پایین محصولات. مثل دیجی کالا. متن توضیحاتم کامل نشون نده و با زدن بیشتر کامل نشون بده. کی میتونه کمکم کنه؟ فایل ووکامرس باید تغییر کنه یا قالبم؟
    • توسط daghighi
      با سلام.
      بنده یک قالب خبری به صورت نیمه خصوصی، خریداری کرده ام. این قالب ترجمه شده از نسخه ای خارجی است. من قصد داشتم جهت امنیت، کاملا شخصی بودن و برخی تغییرات، قالب را کاملا شخصی سازی کنم. به این صورت که همه کدها، پی اچ پی ها و اسکریپ ها و ... و حتی افزونه های لازم، به طور کامل در سرور خودمان، نوشته شده و بارگزاری شود.
      1. آیا این کار شدنی است؟
      2. می توانم به چه کسی مراجعه کنم؟
      3. چه مقدار هزینه و زمان باید صرف شود؟
      تشکر فراوان
    • توسط meysamaliani
      با سلام و عرض ادب
      یک سایتی داریم برای فروش قالب که با ووکامرس ساخته شده
      .دو تا سوال پیش آمده:
      1-چطور برای قالب های ساب دامین یا حالت دموی نمایشی بذاریم که راحت باشه و از هاست کمتر فضا بگیره.مثل :demo.yourdomain.com/twentytheme
      2-در صفحه نمایش دمو یک هدر بالای صفحه هست که نام و اندازه های تصویر رو به کاربر نمایش میده.آیا پلاگینی هست که این کار رو بکنه؟
      اگر آره اسمش؟
      اگر نه چکاری کنیم تا این رو ایجاد کنیم...اگر منظور بنده رو متوجه نشدین نمونه : نمونه نوار چسبان بالا zhaket.com/demo/8233 نوار بالای صفحه