parsgreen.com
article

قابلیت های کاربردی CSS3 در طراحی وب

web-design-css3

از زمان معرفی CSS3 (در تاریخ چهاردهم آوریل سال 2000) تا کنون مباحث زیادی در مورد کاربرد قابلیت های این نسخه در طراحی وب بین توسعه دهنده گان وب و علاقمندان به این مسئله رد و بدل شده است، برخی بر این عقیده اند که به کل باید با شیوه سنتی و جلوه های مبتنی بر ابزارهای گرافیکی (مانند فتوشاپ و..)، عناصر تصویری (تصاویر با فرمت png، jpeg و...) و کد نویسی مبتنی بر جاوا اسکریپت (JavaScript) خداحافظی کرد و تمام موارد این چنین را با قابلیت های CSS3 خلق نمود و در مقابل عده ای به دلایل مختلف همچنان روش های سنتی را بهترین و پایدارترین شیوه برای طراحی وب قلمداد می کنند، به هر صورت به نظر می رسد اصرار بر هر دو روش ما را به بیراهه خواهد برد، چرا که نه تکیه صرف بر روش های سنتی کار درستی است و نه استفاده کورکورانه از قابلیت های جدید، از این رو در این آموزش قصد داریم ضمن آشنایی با پاره ای از قابلیت های کاربردی CSS3 در طراحی جلوه های وب، از معایب و محدودیت های آنها نیز آگاه شویم.

نکته: هدف این مطلب آشنایی کلی با برخی کاربردهای CSS3 در طراحی صفحات وب است و لذا بعضا به جهت مفصل بودن مباحث به حداقل ها اکتفا شده، برای آشنایی تخصصی تر با خاصیت ها باید به صورت اختصاصی در مورد آنها جستجو کنید.

قابلیت transition یا انتقال


اولین قابلیتی که در این آموزش به آن می پردازیم transition یا انتقال نام دارد، CSS3 با استفاده از خاصیت transition می تواند در دو رویداد (selector) متفاوت، ویژگی های یک عنصر را تغییر دهد، به طور مثال رنگ، عرض، ارتفاع و...، به مثال زیر توجه کنید.
.transition-block{
    width:100px;
    height:100px;
    background:#999;
    transition:width 0.5s, height 0.5s, background 0.5s;
    -moz-transition:width 0.5s, height 0.5s, background 0.5s;    
    -webkit-transition:width 0.5s, height 0.5s, background 0.5s;
    -o-transition:width 0.5s, height 0.5s, background 0.5s;            
}
.transition-block:hover{
    width:104px;
    height:104px;
    background:#333;    
}
برای دیدن پیش نمایش مثال ها به صورت آنلاین، به انتهای مطلب مراجعه کنید.
توضیح:
- همان طور که ملاحظه می کنید، در CSS3 برای ایجاد قابلیت transition بین حالت عادی و hover، ابتدا خاصیت هایی که دستخوش تغییر می شوند و مدت زمان این تغییر را (به صورت ثانیه یا Second) مشخص می کنیم، سپس در قسمت hover، ویژگی مورد انتظار در این حالت را تنظیم می نمائیم، به این صورت زمانی که کاربر ماوس را بر روی بلاک مورد نظر می برد، در طی 2 ثانیه ویژگی های بلاک (رنگ پس زمینه، ارتفاع، عرض) آرام آرام از حالت عادی به حالت hover تغییر می کند.
- خاصیت transition به صورت پیش فرض در مرورگر سافاری (و برخی نسخه های پائین تر گوگل کروم) پشتیبانی نمی شود و برای این مرورگر باید از پیشوند webkit استفاده نمود، همچنین برای سازگاری بیشتر این خاصیت با نسخه های قدیمی تر مرورگر های فایرفاکس و اپرا، بهتر است از پیشوند moz و o نیز استفاده کنیم.
محدودیت ها:
با وجود اینکه این قابلیت در اکثر مرورگرهای جدید به خوبی عمل می کند، اما مرورگر اینترنت اکسپلورر تنها از نسخه 10 به بعد از آن پشتیبانی می کند.

ایجاد animation یا تصویر متحرک


ایجاد animation یک قابلیت دیگر در CSS3 است که شباهت زیادی به transition دارد اما در مجموع از آن کامل تر و کمی پیچیده تر است، از خاصیت animation معمولا برای تغییر مکان یک عنصر، رنگ و... به صورتی دلخواه و به همراه افکت هایی استفاده می شود، برای خلق یک تصویر متحرک در CSS3 در کنار خاصیت animation، باید از خاصیت دیگری تحت عنوان keyframes@ نیز استفاده نمود، بد نیست ابتدا یک نمونه از کاربرد این قابلیت را بررسی کنیم.
.animation-block{
    width:50px;
    height:50px;
    background:#F90;
    position:relative;    
    right:0px;
    animation:test 2s infinite;
    -webkit-animation:test 2s infinite;
    -moz-animation:test 2s infinite;
    -o-animation:test 2s infinite;    
}
@keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-webkit-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-moz-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-o-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
توضیح:
- همان طور که از مثال مشخص است، ابتدا به یک کلاس نیازمندیم تا تنظیمات اولیه انیمیشن (نامن انیمیشن، مدت زمان، نوع تکرار و...) را در آن مشخص کنیم.
- سپس در قسمت keyframes، فرم های کلیدی انیمیشن را به صورت درصدی معیین می کنیم، به طور مثال اگر از چهار مقدار درصدی در طول 2 ثانیه استفاده کنیم، در واقع چهار فرم کلیدی ایجاد کرده ایم، خصوصیات انیمیشن، فرم به فرم با توجه به تنظیمات ما تغییر خواهد کرد.
- برای سازگاری خاصیت animation با مرورگرهای خانواده Apple مانند سافاری، کروم و... باید از پیشوند webkit مطابق نمونه بالا استفاده کنیم، همچنین برای سازگاری بیشتر با مرورگرهای خانواده موزیلا (فایرفاکس) و اپرا از پیشوندهای moz و o استفاده می کنیم.
محدودیت ها:
متاسفانه این قابلیت نیز در مرورگر اینترنت اکسپلورر تنها از نسخه 10 و مابعد پشتیبانی می شود.

قابلیت border-radius یا گوشه نرم


در CSS3 این امکان وجود دارد که با استفاده از خاصیت border-radius، عناصری با شعاع گرد شده یا به اصطلاح نرم داشته باشیم، به طور مثال می توان فیلدهای گوشه گرد یا بلاک هایی با شعاع نرم، بدون استفاده از المان های تصویری ساخت، به مثال زیر توجه کنید.
.radius-block{
    height:100px;
    width:100px;
    border:1px solid #999;
    border-radius:8px 8px 8px 8px;
    -webkit-border-radius:8px 8px 8px 8px;    
    -moz-border-radius:8px 8px 8px 8px;
    -o-border-radius:8px 8px 8px 8px;        
}
این خاصیت از لحاظ پشتیبانی مرورگرها وضعیت بهتری نسبت به سایر خواصی که تا اینجا بررسی کردیم دارد و در نسخه های به روز تمام مرورگرها و همچنین از نسخه 9 و ما بعد اینترنت اکسپلورر پشتیبانی می شود.
نکته: برای سازگاری خاصیت border-radius با نسخه های قدیمی مرورگر فایرفاکس باید از پیشوند moz نیز طبق نمونه بالا استفاده کنیم، همچنین برای اطمینان بیشتر از پشتیبانی شدن آن در نسخه های متفاوت سایر مرورگرها، بهتر است از پیشوندهای webkit و o نیز استفاده کنیم.

قابلیت box-shadow یا جعبه سایه دار


یکی دیگر از خاصیت های کاربردی CSS3، قابلیت ایجاد عناصر سایه دار با استفاده از box-shadow است، بدین معنی که با تنظیم این خاصیت برای یک عنصر، می توان جلوه ای سایه مانند به صورت سفارشی به آن نسبت داد که ناگفته پیدا است تا چه میزان در طراحی صفحات وب مفید خواهد بود، به مثال زیر توجه کنید.
.shadow-block{
    height:100px;
    width:150px;
    background:#FC0;    
    box-shadow:5px 5px 5px #999;    
    -moz-box-shadow:5px 5px 5px #999;
    -webkit-box-shadow:5px 5px 5px #999;
    -o-box-shadow:5px 5px 5px #999;
}
این خاصیت در نسخه های به روز تمام مرورگرها و همچنین از نسخه 9 و ما بعد اینترنت اکسپلورر پشتیبانی می شود.
نکته 1: برای سازگاری خاصیت box-shadow با نسخه های قدیمی تر مرورگرها باید از پیشوند moz، webkit و ترجیحا o نیز طبق نمونه بالا استفاده کنیم.
نکته 2: قابلیت دیگری در CSS3 با نام text-shadow وجود دارد که شباهت زیادی به box-shadow دارد، با این تفاوت که text-shadow معمولا در ایجاد سایه برای متن کاربرد دارد.

قابلیت ایجاد عناصر دو بعدی و سه بعدی در CSS3


با معرفی CSS3 امکان ایجاد جلوه های دو بعدی (2D) و سه بعدی (3D) در وب فراهم شده است که هر کدام از آنها شامل خصوصیات زیرمجموعه ای خود هستند، خاصیت های مربوط به ویژگی های 2D عمدتا در دو محور X و Y (افقی و عمودی) و خاصیت های 3D ضمن استفاده از محور X و Y از محور Z (محور عمق در اشیاء سه بعدی) نیز بهره می برد.
نکته: محور Z در اشیاء و محیط های سه بعدی در واقع همان محوری است که از نقطه تلاقی دو محور X و Y می گذرد (جایی که X و Y هر دو صفر هستند) و القا کننده عمق است.
در CSS3 برای خلق جلوه های دو بعدی (2D) از خاصیت های transform و transform-origin با تنظیم متدهای ویژه زیر استفاده می شود:
- متد translate: انتقال یک عنصر از نقطه ای به نقطه دیگر (بر اساس محور X ها و Y ها).
- متد rotate: چرخش یک عنصر از 0 تا 360 درجه.
متد scale: بزرگ نمایی یا کوچک نمایی عنصر در راستای محور X ها و Y ها.
متد skew: کج کردن یک عنصر.
متد matrix: ترکیب تمام متدهای دو بعدی بالا در یک متد.
به مثال زیر توجه کنید.
.rotate-block{
    width:200px;
    height:100px;
    background:#39C;
    transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);    
}
برای دیدن پیش نمایش مثال ها به صورت آنلاین، به انتهای مطلب مراجعه کنید.
همان طور که ملاحظه می کنید، متدهای خاصیت transform از استاندارد مقداردهی خاص خود پیروی می کنند (deg یا درجه) که پیش از این در نسخه های قبلی CSS وجود نداشت.
علاوه بر جلوه های دو بعدی، امکان خلق عناصر سه بعدی (همراه با عمق) نیز در CSS3 فراهم شده است، بدین منظور از خاصیت هایی مانند transform، transform-origin، transform-style، perspective، perspective-origin و backface-visibility در کنار متدهای زیر استفاده می شود:
- متد perspective: تعریف نمای سه بعدی برای عنصر.
- متد rotateX: گردش حول محور X ها.
- متد rotateY: گردش حول محور Y ها.
- متد rotateZ: گردش حول محور Z ها.
- متد rotate3d: گردش حول سه محور X، Y، Z (سه بعدی).
- متد scaleX: بزرگ نمایی یا کوچک نمایی حول محور X ها.
- متد scaleY: بزرگ نمایی یا کوچک نمایی حول محور Y ها.
- متد scaleZ: بزرگ نمایی یا کوچک نمایی حول محور Z ها.
- متد scale3d: بزرگ نمایی یا کوچک نمایی حول سه محور X، Y، Z (سه بعدی).
- متد translateX: انتقال حول محور X ها.
- متد translateY: انتقال حول محور Y ها.
- متد translateZ: انتقال حول محور Z ها.
- متد translate3d: انتقال حول سه محور X، Y، Z (سه بعدی).
- متد matrix3d: ترکیب تمام متدهای سه بعدی بالا در یک متد.
به مثال زیر توجه کنید.
#perspective-container{
    width:200px;
    height:100px;
    perspective:300px;
    -webkit-perspective:300px;                
}
#perspective-container .perspective-block{
    width:200px;
    height:100px;
    background-color:#9C0;
    transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);    
    -webkit-transform:rotateY(45deg);    
    -o-transform:rotateY(45deg);            
}
همان طور که از کدهای بالا پیدا است، قابلیت perspective خود متکی بر به کارگیری سایر خاصیت های CSS3 مانند transform است و به خودی خود ممکن است تاثیری بر عناصر صفحه نداشته باشد.
متاسفانه پشتیبانی مرورگرها در این زمینه چندان رضایت بخش نیست و تقریبا تمام آنها در قسمتی دچار مشکلاتی هستند.

مثال و پیش نمایش آنلاین


در زیر خاصیت هایی را که در این آموزش بررسی کردیم در قالب یک صفحه وب و به صورت آنلاین قرار داده ایم، ضمن اینکه حتی المقدور مثال های بیشتری نیز به آن اضافه شده.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>وبگو | نمونه قابلیت های CSS3 در طراحی وب</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    direction:rtl;
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
.transition-block{
    width:100px;
    height:100px;
    background:#999;
    transition:width 0.5s, height 0.5s, background 0.5s;
    -moz-transition:width 0.5s, height 0.5s, background 0.5s;    
    -webkit-transition:width 0.5s, height 0.5s, background 0.5s;
    -o-transition:width 0.5s, height 0.5s, background 0.5s;            
}
.transition-block:hover{
    width:104px;
    height:104px;
    background:#333;    
}
.transition-button{
    position:relative;
    width:200px;
    color:#FFF;
    display:block;
    text-decoration:none;
    border-radius:5px;
    border:solid 1px #999;
    background:#999;
    text-align:center;
    padding:20px 30px;
    transition:all 0.1s;    
    -webkit-transition:all 0.1s;
    -moz-transition:all 0.1s;
    -o-transition:all 0.1s;    
    box-shadow:0px 9px 0px #333;    
    -webkit-box-shadow:0px 9px 0px #333;
    -moz-box-shadow:0px 9px 0px #333;
    -o-box-shadow:0px 9px 0px #333;    
}
.transition-button:active{
    box-shadow:0px 2px 0px #333;    
    -webkit-box-shadow:0px 2px 0px #333;
    -moz-box-shadow:0px 2px 0px #333;
    -o-box-shadow:0px 2px 0px #333;    
    position:relative;
    top:7px;
}
.animation-block{
    width:50px;
    height:50px;
    background:#F90;
    position:relative;    
    right:0px;
    animation:test 2s infinite;
    -webkit-animation:test 2s infinite;
    -moz-animation:test 2s infinite;
    -o-animation:test 2s infinite;    
}
@keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-webkit-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-moz-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
@-o-keyframes test{
    0% {width:50px; background:#F90; right:0px;}
    25% {width:100px; background:#F93; right:300px;}
    50% {width:150px; background:#F96; right:500px;}
    100% {width:200px; background:#F99; right:700px;}    
}
.animation-block-2{
    width:50px;
    height:50px;
    background:#09F;
    animation:test-2 1s infinite;
    -webkit-animation:test-2 1s infinite;
    -moz-animation:test-2 1s infinite;
    -o-animation:test-2 1s infinite;    
}
@keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-webkit-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-moz-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
@-o-keyframes test-2{
    0% {background:#09F;}
    100% {background:#F30;}    
}
.radius-block{
    height:100px;
    width:100px;
    border:1px solid #999;
    border-radius:8px 8px 8px 8px;
    -webkit-border-radius:8px 8px 8px 8px;    
    -moz-border-radius:8px 8px 8px 8px;
    -o-border-radius:8px 8px 8px 8px;        
}
.shadow-block{
    height:100px;
    width:150px;
    background:#FC0;    
    box-shadow:5px 5px 5px #999;    
    -moz-box-shadow:5px 5px 5px #999;
    -webkit-box-shadow:5px 5px 5px #999;
    -o-box-shadow:5px 5px 5px #999;
}
.shadow-block-2{
    margin-top:16px;
    height:50px;
    width:100px;
    background:#CC0;        
    box-shadow:0px 0px 2px #999;    
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;    
    animation:clear 1s;
    -moz-animation:clear 1s;            
    -webkit-animation:clear 1s;            
    -o-animation:clear 1s;            
}
@keyframes clear{
    0% {box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;}
    100% {box-shadow:0px 0px 2px #999;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;}    
}
.shadow-block-2:hover{
    box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;    
    animation:shadow 1s;
    -moz-animation:shadow 1s;    
    -webkit-animation:shadow 1s;
    -o-animation:shadow 1s;    
}
@keyframes shadow{
    0% {box-shadow:0px 0px 2px #999;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    -o-box-shadow:0px 0px 2px #999;}
    100% {box-shadow:0px 0px 10px #999;
    -moz-box-shadow:0px 0px 10px #999;
    -webkit-box-shadow:0px 0px 10px #999;
    -o-box-shadow:0px 0px 10px #999;}    
}
.rotate-block{
    width:200px;
    height:100px;
    background:#39C;
    transform:rotate(-10deg);
    -moz-transform:rotate(-10deg);
    -webkit-transform:rotate(-10deg);
    -o-transform:rotate(-10deg);    
}
.skew-block{
    width:200px;
    height:100px;
    background:#36C;
    transform:skew(10deg, 10deg);
    -moz-transform:skew(10deg, 10deg);    
    -webkit-transform:skew(10deg, 10deg);
    -o-transform:skew(10deg, 10deg);            
}
#perspective-container{
    width:200px;
    height:100px;
    perspective:300px;
    -webkit-perspective:300px;                
}
#perspective-container .perspective-block{
    width:200px;
    height:100px;
    background-color:#9C0;
    transform:rotateY(45deg);
    -moz-transform:rotateY(45deg);    
    -webkit-transform:rotateY(45deg);    
    -o-transform:rotateY(45deg);            
}
</style>
</head>
<body>
&laquo; نمونه برای قابلیت transition &raquo;
<br><br>
<div class="transition-block"></div>
<br><br>
برای بررسی این قابلیت، ماوس را بر روی بلاک div ببرید.
<br><br>
&laquo; خلق جلوه های پیشرفته با transition &raquo;
<br><br>
<div class="transition-button">دکمه 2 بعدی با نمای 3 بعدی</div>
<br><br>
برای پشتبانی شدن قابلیت transition در نسخه های قدیمی تر مرورگرها، باید از پیشوند moz ، webkit و o استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت animation &raquo;
<br><br>
<div class="animation-block"></div>
<div class="animation-block-2"></div>
<br><br>
برای ایجاد انیمیشن های در حلقه (دور تکرار) از مقادیر infinite در تنظیمات خاصیت animation استفاده می شود.
<hr>
&laquo; نمونه برای قابلیت border-radius &raquo;
<br><br>
<div class="radius-block"></div>
<br><br>
برای پشتبانی شدن قابلیت border-radius در نسخه های قدیمی تر مرورگر فایرفاکس، باید از پیشوند moz استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت box-shadow &raquo;
<br><br>
<div class="shadow-block"></div>
<div class="shadow-block-2"></div>
<br><br>
برای پشتبانی شدن قابلیت box-shadow در نسخه های قدیمی تر مرورگرها، باید از پیشوند moz و webkit استفاده کنیم.
<hr>
&laquo; نمونه برای قابلیت transform 2d با متد rotate &raquo;
<br><br>
<div class="rotate-block"></div>
<br><br>
&laquo; نمونه برای قابلیت transform 2d با متد skew &raquo;
<br><br>
<div class="skew-block"></div>
<br><br>
برخی از قابلیت های CSS3 برای اجرا در نسخه های قدیمی تر مرورگر اپرا نیاز به پیشوند o دارند.
<br><br>
<hr>
&laquo; نمونه برای قابلیت perspective &raquo;
<br><br>
<div id="perspective-container">
<div class="perspective-block"></div>
</div>
<br><br>
در حال حاضر این قابلیت تنها در برخی مرورگرها به درستی پشتیبانی می شود.
<br><br>
</body>
</html>
پیش نمایش آنلاین
نکته: خاصیت های CSS3 محدود به موارد گفته شده نیست، اما از آنجایی که در آغاز مطلب نیز اشاره به هدف این آموزش (آشنایی کلی با برخی قابلیت هایی که CSS3 می تواند در اختیارمان قرار دهد) شد، لذا به جهت پرهیز از اطاله کلام، بحث را در همین جا به پایان می بریم.
sectionدسته بندی: مهارتهای وب » طراحی وب
related مطالب بیشتر:
» طراحی باکس جستجو با فتوشاپ و CSS
» آموزش نحوه کاهش حجم تصاویر وب با فتوشاپ
» زیبا سازی فرم های وب با css
» آموزش انتقال قالب از فتوشاپ به کد html و css
» طراحی قالب سه بعدی وب با فتوشاپ و css
commentنظرات (۳۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: کوروش
زمان: ۱۷:۳۸:۴۴ - تاریخ: ۱۳۹۲/۰۴/۲۴
مرسی خیلی عالی بود
نویسنده: razetarikh
زمان: ۱۳:۴۶:۲۸ - تاریخ: ۱۳۹۲/۰۴/۲۷
سلام
یک سوال داریم ایا میشه به وسیله css تگ های h1,....h6 را مخفی کرد
اگر میشود این کد را بنویس برام ممنون میشوم
پاسخ: 
سلام
عبارت "مخفی" را در قسمت جستجوی سایت وارد کنید، در مطلبی تحت عنوان "مخفی کردن عناصر وب با CSS" به صورت مفصل در این رابطه توضیح داده شده.
نویسنده: ✘ ħñÌM† ✘
زمان: ۱۵:۲۱:۴۰ - تاریخ: ۱۳۹۲/۰۵/۰۲
سلام
وب من یه مشکلی پیدا کرده....عکسایی رو که توش میذارم رو بعد از یه مدت نمیاره....الان برای باره سوم هست که عکسام رو دوباره آپلود می کنم ولی دوباره بعد از یه مدت نمیاره...چی کار کنم؟؟؟... :(
پاسخ: 
سلام
مشکل از وبلاگ شما نیست، مشکل از سرویس دهنده ای است که فایل های خود را در آن آپلود می کنید، ظاهرا پس از مدتی فایل های شما به صورت خودکار حذف می شوند.
از سایت دیگری برای آپلود تصاویر استفاده کنید.
نویسنده: آموزش css
زمان: ۱۲:۲۹:۱۵ - تاریخ: ۱۳۹۲/۰۵/۲۲
عالی
خیلی استفاده کردم
باید توی سایتم از css 3 استفاده کنم
ممنون
نویسنده: میثم
زمان: ۱۵:۱۵:۰۹ - تاریخ: ۱۳۹۳/۰۳/۳۰
سلام خسته نباشید
سوال 1 - وقتی در یک div از linear-gradiant استفاده می کنیم
دیگه نمیتونیم از background-image استفاده کنیم.
به روش های مختلف تست کردم نشد یا عکس نمایش داده میشه یا رنگ چطور میشه از هر دو استفاده کرد؟
سوال 2 - گاهی کد های top left right bottom برای من کار نمیکنن و مجبورم از معادلشون (margin-top و... ) استفاده کنم
به نظر شما دلیلش چیه؟
سوال 3 - vertical-align فقط توی Table ها کاربرد داره؟
چون من وقتی از این گزینه برای یک div استفاده میکنم تاثیری نداره.
مرسی.
پاسخ: 
سلام
1- با پیروی از نمونه کد آماده زیر این کار ممکن است:
background: #6cab26;
background-image: url(IMAGE_URL); /* fallback */
background-image: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#6cab26), to(#6ceb86)); /* Saf4+, Chrome */
background-image: url(IMAGE_URL), -webkit-linear-gradient(top, #6cab26, #6ceb86); /* Chrome 10+, Saf5.1+ */
background-image: url(IMAGE_URL), -moz-linear-gradient(top, #6cab26, #6ceb86); /* FF3.6+ */
background-image: url(IMAGE_URL), -ms-linear-gradient(top, #6cab26, #6ceb86); /* IE10 */
background-image: url(IMAGE_URL), -o-linear-gradient(top, #6cab26, #6ceb86); /* Opera 11.10+ */
background-image: url(IMAGE_URL), linear-gradient(to bottom, #6cab26, #6ceb86); /* W3C */
2- خاصیت های مذکور میزان فاصله عنصر از صفحه نمایش را تنظیم می کنند، اما margin فاصله از عنصر والد، مجاور یا صفحه نمایش را تعیین می کند، به نظر از خاصیت های top left right bottom این انتظار را داشته اید که از بلاکی دیگر فاصله ایجاد کنند که صحیح نیست.
3- خیر، اما بیشترین کاربرد آن در جدول و تنظیم تصاویر، همچنین تنظیم label در فرم ها و... است، این خاصیت به طور معمول در div کاربرد ندارد، اما اگر div به صورت inline باشد می تواند بسته به موقعیت تاثیر داشته باشد.
نویسنده: طراحی سایت
زمان: ۱۸:۵۰:۰۸ - تاریخ: ۱۳۹۳/۰۷/۰۷
سایت خوبی دارید موفق باشید
نویسنده: بورس
زمان: ۱۴:۱۹:۱۶ - تاریخ: ۱۳۹۳/۰۷/۱۹
ممنون از زحمات و دقت عملی که به خرج داده اید.
نویسنده: طراحی سایت
زمان: ۱۶:۴۸:۱۷ - تاریخ: ۱۳۹۳/۰۷/۲۹
با سلام. خسته نباشید عرض می کنم و کمال تشکر را از شما دارم
نویسنده: بیتوته
زمان: ۱۱:۴۶:۳۱ - تاریخ: ۱۳۹۴/۰۱/۱۵
عالی بود با تشکر از سایت خیلی خیلی خوبتون
نویسنده: saharrahin
زمان: ۱۶:۳۸:۱۹ - تاریخ: ۱۳۹۴/۰۱/۲۲
با سلام ممنونم از سایت عالیتون موفق باشید
نویسنده: themeline
زمان: ۲۳:۴۹:۲۰ - تاریخ: ۱۳۹۴/۰۵/۱۰
واقعا css 3 خیلی کامله و فکر نمیکنم تا چند سال دیگه هم css 4 داشته باشیم !
نویسنده: سئو سایت
زمان: ۱۸:۲۷:۱۸ - تاریخ: ۱۳۹۴/۰۵/۲۵
آموزش تون مفید بود . متشکرم .
نویسنده: داوود
زمان: ۱۱:۲۲:۳۷ - تاریخ: ۱۳۹۴/۰۸/۰۴
سلام آقای مهندس؛
وقتتون بخیر.
استاد طبق معمول یه همچین کدی اگه داشته باشیم:
<ul id="menu">
<li><a href="" class=>Portfolio</a></li>
<li><a href="">Test</a></li>
<li><a href="">About</a></li>
<li><a href="">Testimonials</a></li>
<li><a href="">Request a Quote</a></li>
</ul>
حالا من میخوام عنصر اول از منو رو مثلا قرمز رنگ بزارم که طرف بدونه صفحه اول هستش. اومدم و اینجوری که نوشتم قبول نکرد:
ul#menu li a:first-child{
color: black;
}
ولی اینجوری قبول کرد:
ul#menu li:first-child a {
color: black;
}
میخواستم ببینم چرا مورد اول رو قبول نکرد؟ در صورتی که درست و منطقی هم بنظر میرسه از نظر خودم البته.
ازتون ممنون و سپاسگزارم.
پاسخ: 
سلام
سلکتور first-child (مشابه last-child) در صورتی قابل استفاده است که عنصر اولین فرزند از والد خود باشد!
نویسنده: داوود
زمان: ۱۸:۳۴:۱۵ - تاریخ: ۱۳۹۴/۰۸/۰۶
سلام آقای مهندس؛
ممنون و سپاسگزارم.
یعنی منظورتون اینه که اینجا باید رو li مانور بدیم چون اولین عنصر بعد از ul هستش. درست فهمیدم؟؟ یعنی همیشه اولین عنصر بعد از اولین تگی که ما هدف قرار دادیم، میاد و تاثیر میگیره؟
اگه بخوایم طوری آدرس دهی کنیم که اولین لینک رو تحت تاثیر قرار بده (طبق تگ a و نه li یعنی هدفمون اولین a باشه بدون در نظر گرفتن li) باید کد css رو با li شروع کنیم؟؟
اینجوری یعنی:
li a:first-child{}
پاسخ: 
سلام
دقیقا متوجه بخش آخر سوال نشدیم، اما در دو حالت ممکن، استایل به شکل های زیر می شود که با تست می توان به تفاوت های آنها پی برد:
ul#menu li:first-child a:first-child{
background:#000000;
display:block;
}

ul#menu li a:first-child{
background:#000000;
display:block;
}
نویسنده: داوود
زمان: ۰۸:۱۶:۳۶ - تاریخ: ۱۳۹۴/۰۸/۰۹
سلام آقای مهندس، صبح اولین روز هفته تون بخیر و خوشی انشاالله. قبل از طرح سوالم ازتون بخاطر سوالام عذرخواهم.
مهندس جان در خصوص همین سوال آخری؛ فقط کد اولی جواب میده ها . یعنی دومی هیچ تاثیری روی اولین فرزند نداره و روی همه ش تاثیر گذاره. پس بنظرم ما باید از همون روش اولی که نوشتین استفاده کرده و روش دوم کلا بی تاثیر هستش. منظورم از کد دوم که بی تاثیر هستش؛ همین کده:
ul#menu li a:first-child{
background:#000000;
display:block;
}
بقول شما باید طبق li کار کنیم. ممنونم از پاسخگویی تون.
پاسخ: 
سلام
خیر! روش دوم هم تاثیر خودش را دارد، هرچند نتیجه مد نظرتان نیست! در حالت دوم چون li خودش به first-child محدود نشده، هر تگ li موجود در کدها را شامل می شود و لذا تگ a بعد از هر تگ li می شود اولین فرزند همان تگ li و در نتیجه استایل روی آن اعمال می شود!
paged صفحه 1 از 3




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

3 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...