اگر تمایل به کار با css به صورت پیشرفته و حرفه ای دارید ، توصیه می کنیم اطلاعات ارائه شده در این بخش از شرکت طراحی سایت مبنا را مطالعه نمایید. طراحی سایت با css به صورت حرفه ای مستلزم آموختن نکاتی است که در این بخش سعی ما بر این است تا به ارائه این نکات در طراحی سایت به صورت مفصل و جامع بپردازیم.
ویژگی overflow در css
در این بخش از آموزش css خاصیت Overflow را توضیح می دهیم.
گاهی اتفاق می افتد که دستورات وارده بر یک عنصر سر ریز کند با استفاه از ویژگی overflow می توان در طراحی سایت فهمید که بعد از سر ریز شدن چه اتفاقی می افتد.توجه داشته باشید که این ویژگی در همه ی مرورگرها پشتیبانی می شود.
مثال زیر کاربرد ویژگی overflow را در طراحی سایت نشان می دهد.
div
{
width:150px;
height:150px;
overflow:scroll;
}
ویژگی Position در css
در این بخش از آموزش Css خاصیت position را توضیح می دهیم.
از ویژگی position برای تعیین مکان یک عنصر استفاده می شود به عبارتی برای اینکه بخواهیم موقعیت یک عنصر را در صفحه تغییر دهیم از این ویژگی استفاده می کنیم.در طراحی سایت ویژگی Position از مهمترین کارها به حساب می آید.
توجه داشته باشید که Position موقعیت یک عنصر در صفحه را ثابت می کنه ولی تو مرورگر اکسپلورر6 ساپورت نمی شود و معمولا با اختلالاتی روبرو می شود.
position شامل ویژگی هایی می باشد که عبارتند از top,left,right,bottom که هر کدام از این ویژگی ها موقعیت خاصی را برای عنصر به وجود می آورند.
خاصیت top موقعیت عنصر موردنظر را به سمت بالا هدایت می کند.خاصیت bottom میزان فاصله عناصر را از پایین پنجره مرورگر مشخص می کند.خاصیت left موقعیت عنصر مورد نظر را به سمت چپ هدایت می کند و خاصیت right فاصله عنصر را از سمت راست صفحه تعیین می کند.
position می تواند دارای چهار مقدار باشد که عبارتنداز:relative,static,absolute,fixed.
static position:این ویژگی همیشه پیش فرض می باشد و تمام عناصر html به صورت static نوشته می شوند.در این ویژگی عناصر در همان جایی که در دستور نوشته شده اند به نمایش درمی آیند.
absolute position:این ویژگی این امکان را می دهد که یک عنصر از صفحه را در هر موقعیتی نسبت به بالا،پایین،راست یا چپ صفحه نمایش دهیم.
fixed position:این ویژگی در طراحی سایت ، موقعیت یک عنصر در صفحه را مشخص می کند مثلا وقتی صفحه را کوچک می کنیم یا به منطقه ی خاصی از صفحه وب سایت می روییم عنصری که این خاصیت را دارا باشد به همان صورت قبلی باقی می ماند و تغییر نمی کند.
مثال زیر کاربرد خاصیت fixed position را در ویژگی position را نشان می دهد.
p.pos_fixed
{position:fixed;
top:30px;
right:5px;}
relative position:
با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.
relative position:با استفاده از ویژگی عنصر مورد نظر نسبت به موقعیت فعلی خود در صفحه موقعیت دهی می شود.
مثال زیر کاربرد خاصیت relative positon را در ویژگی Position در طراحی سایت نشان می دهد.
h2.pos_left
{position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;}
ویژگی float و clear در css
خاصیت clear
در این قسمت از آموزش css ، خاصیت Clear و خاصیت Float را توضیح می دهیم.
با استفاده از خاصیت clear می توان کناره هایی از عنصر را که می خواهیم متن یا عکس در آن سمت قرار نگیرد را مشخص می کنیم،در واقع از این خاصیت برای خالی کردن فضای اطراف یک عنصر استفاده می شود.که حالت های مختلفی دارد که تعدادی از انها توضیح می دهیم.
none:در دو طرف عنصر مجاز است که عکس یا متن قرار بگیرد که حالت پیش فرض می باشد.
right:در سمت راست هیچ عکس و تنی نمی تواند قرار گیرد.
left:در سمت چت هیچ عکس و متنی نمی تواند قرار گیرد.
both:دو طرف عنصر هیچ عکس و متنی نمی تواند قرار گیرد.
مثال زیر خاصیت Clear را در طراحی سایت نشان می دهد.
img
{
float:left;
}
p.clear
{
clear:both;
}
ویژگی float
با استفاده از خاصیت float می توان موقعیت یک عنصر را به سمت چپ یا راست تنظیم کرد.خاصیت float از مهمترین ویژگی ها در Css و همچنین طراحی سایت می باشد.این خاصیت وقتی عمل می کند که به عنصر مورد نظر خاصیت موردنظر خود را بدهید.
مثال زیر کاربرد خاصیت Float را نشان می دهد.
.text
{float:left;
width:110px;
height:90px;
margin:5px;}
ویژگی cursor و visibility و display در css
در این قسمت از آموزش Css ، ویژگی Cursor , ویژگی Visibility و خاصیت Display را توضیح می دهیم.
ویژگی Display نحوه ی نمایش عنصر موردنظر را در صفحه تعیین می کند.این خاصیت می تواند شامل مواردی باشد که تعدادی از آنها را بیان می کنیم.
none:در این حالت تصویر نمایش داده نمی شود.
block:در این حالت عنصر به صورت یک شی مجزا با یک خط فاصل قبل و بعد از آن نمایش داده می شود.
inline:در این حالت عنصر به صورت یک شی درون خط ی بدون هیچ خط فاصله قبل و بعد از آن نمایش داده می شود،که حالت پیش فرض است.
list-item:در این حالت عناصر به صورت لیست دیده می شوند.
table:در این حالت عنصر به صورت یک جدول با یک خط فاصله قبل و بعد از آن صفحه نمایش داده می شود.
مثال زیر کاربرد خاصیت display را در طراحی سایت نشان می دهد.
li {display:inline;}
span {display:block;}
با استفاده از خاصیتvisibility شما می توانید عناصر مورد نظر خود را قابل و یا غیر قابل نمایش کنید.visible به معنای نمایش دادن می باشد و با خاصیت hidden می توانید عنصر مورد نظر خود را غیر قابل نمایش کنید.
مثال زیر کاربرد خاصیت visibility را در طراحی سایت نشان می دهد.
h1.hidden {visibility:hidden;}
با استفاده از cursor می توان نوع اشاره گر موس مورد استفاده برای عناصر را تغییر داد.
مثال زیر کاربرد خاصیت cursor را نشان می دهد.
span.crosshair {cursor:crosshair}
span.help {cursor:help}
span.wait {cursor:wait}
ویژگی Opacity در css
در این بخش از مقالات طراحی سایت ، ویژگی Opacity را توضیح می دهیم.
این خاصیت مقدار وضوح عکس را نشان می دهد به این ترتیب که هرچقدر opacity مقدار بالاتری داشته باشد عکس واضح تر است و هرچقدر Opacity کمتر باشد شفافیت تصویر کمتر می شود.
مثال زیر کاربرد ویژگی Opacity در بخش آموزش Css نشان می دهد.
img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
نکته ی قابل توجه این است که مرورگر اکسپلورر 6و7و8 از خاصیت Opacity پشتیبانی نمی کند.در این روش برای مقدار opacity اعدا را بین 0 تا 100 انتخاب می کنیم.در سایر مرورگرها این مقدار را بین 1 تا 0 در نظر می گیریم به این ترتیب که هرچه از 0 به سمت 1 برویم از شفافیت عنصر کاسته می شود.
ویژگی z-index در css
در این قسمت از آموزش CSS ، ویژگی Z-Index را برای شما توضیح می دهیم.
ویژگی Z-Index برای عناصر شماره های منحصربه فردی را انتخاب می کند که به ترتیب می باشند.با استفاده از این ویژگی در طراحی سایت عنصر با شماره ی بزرگتر بالای عنصر دیگر قرار می گیرد.توجه داشته باشید که این ویژگی زمانی کاربرد دارد که خاصیت Position بر روی مقدار Relative و یا Absolute قرار گرفته باشد.
ایجاد اشکال مختلف با css
در این قسمت از آموزش css می خواهیم روش هایی را توضیح دهیم که به وسیله ی آن بتوانید از اشکالی که می خواهید استفاده کنید .
با یادگیری این موارد می توانید در طراحی سایت خوب یکی از بهترین ها باشید ی زرا ایجاد شکل در طراحی بسیار مهم و برای کاربر جالب می باشد . در ابتدا از اشکال ساده ای مثل مربع و مستطیل استفاده می کنیم . دستور زیر شکل کلی رسم مربع یا مستطیل را نمایش می دهد.دقت شود که هر نامی را میتوان در بخش id در نظر گرفت اما برای مفهومی تر بودن بهتر است اسمهای با معنی را در نظر بگیرید.توجه داشته باشید که عرض را با width و طول را با height نمایش می دهیم و رنگ لازم را مشخص می کنیم .
#square {
width: 100px;
height: 100px;
background: #555;
}
همچنین برای رسم دایره از border-radius برای تبدیل گوشه های تیز مربع یا مستطیل به صورت گرد استفاده می کنیم و دستور کلی آن به این شکل می باشد .
#circle {
width: 100px;
height: 100px;
background: #555;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;
}
دقت شود که در کدهای قالب از کد <div id="square"></div> استفاده شود . و در بقیه موارد نیز همچنین.
( -moz-برای نمایش صحیح کد در فایرفاکس، -webkit- برای نمایش صحیح در کروم، -o- نمایش صحیح در اپرا )
از آنجاییکه رسم بیضی مانند زسم دایره می باشد و فقط طول و عرض آن را تغییر می دهیم .مانند دستور زیر:
#oval {
width: 200px;
height: 100px;
background: #555;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
برای نمایش شکل قلب نیز از دستور زیر استفاده می شود .
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: #666;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
} #heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
همچنین در پایان نمایش کادرهای گفتگو در سایت می توان از دستور زیر استفاده کرد :
#talkbubble {
width: 120px;
height: 80px;
background: #666;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid #666;
border-bottom: 13px solid transparent;
}
همچنین می توان برای رسم مثلث می توان از دستور زیر استفاده کرد :
.triangle{
width:0;
height:0;
border-bottom:100px solid red;
border-left:50px solid transparent;
border-right:50px solid transparent;
}
ایجاد نمودار با Css
در این قسمت از آموزش css ومقالات طراحی سایت می خواهیم ایجاد یک نمودار برای محتوای پویا را با استفاده از css توضیح دهیم.
توجه داشته باشید که کدهای پایین را در قسمت head از صفحه html خود وارد کنید.(یا اینکه این کدها رو به فایل css خود وارد کنید.) برای ایجاد این نوع نموادرها در طراحی سایت می توانید از دستورات زیر استفاده کنید:
<style>
.container{
width:300px;
font-family: Arial;
}
.record{
float: left;
width: 100%;
border: 1px solid #ccc;
background-color: #f0f0f0;
margin-bottom: 2px;
-moz-border-radius: 0px 10px 10px 0px;
-moz-border-radius: 0px 10px 10px 0px;
}
.bar {
background: transparent url(gradient.png) repeat-x top left;
float: left;
clear: left;
height: 30px;
}
.bar span{
font-size: 12px;
font-weight: bold;
color: #fff;
float: left;
margin-left: 5px;
margin-top: 7px;
}
.p{
padding-top: 3px;
float: right;
color: #6D8591;
clear: right;
font-size: 12px;
font-weight: bold;
height: 25px;
}
.p span{
font-size: 12px;
font-weight: bold;
float: left;
margin-right: 5px;
margin-top: 5px;
}
</style><br><br>
توجه داشته باشید که در ابتدا ما یک container ایجاد میکنیم که نمودار و تمام رکوردهای ما را نگه خواهد داشت.عرض اون میتواند با توجه به نیاز شما تغییر کند.در اینجا ما عرض رکوردها رو به درصد تعیین کرده ایم.شما میتونید از این نمودار زیبا در محتوای پویا استفاده کنید.(در پیشرفت پروژه, میزان فعالیت ها در سایت,..., هر آنچه که در یک سایت نیاز به نمودار دارد.)
کدهای html که توضیح داده شد و باید در فایل html در طراحی سایت ما قرار گیرند:
<div class="container">
<div class="record"><div class="bar" style="width:55%;"><span>Mozilla</span></div><div class="p"><span>55%</span></div></div>
<div class="record"><div class="bar" style="width:30%;"><span>IE</span></div><div class="p"><span>30%</span></div></div>
<div class="record"><div class="bar" style="width:22%;"><span>Safari</span></div><div class="p"><span>22%</span></div></div>
<div class="record"><div class="bar" style="width:20%;"><span>Opera</span></div><div class="p"><span>20%</span></div></div>
</div>
واحد های css
CSS برای بیان هر مقدار دارای واحدهای مختلفی است. بسیاری از خواص CSS نیاز به تعیین "مقدار" دارند، مانند عرض (width)، حاشیه (margin)،اندازه فونت، padding، ضخامت حاشیه، و غیره.
برای بیان مقدار نیاز به واحد داریم، مانند px10و،em2، و غیره. بین مقدار و واحد نباید فاصله وجود داشته باشد. با این حال، اگر مقدار 0 باشد، می توان واحد را حذف کرد. برای برخی از خصوصیات CSS، می توان از مقدار های منفی استفاده کرد. دو نوع واحد برای مقدار وجود دارد: نسبی و مطلق.
واحد های نسبی، یک مقدار را نسبت به مقدار ویژگی دیگر مشخص می کند. این واحد ها شامل : em (با اندازه فونت عناصر مرتبط است)، ex (به ندرت مورد استفاده قرار می گیرد)، ch (مرتبط با ضخامت صفر است)، rem (مرتبط با اندازه فونت عناصر ریشه است)، vw (وابسته به 1% عرض دید)، vh (وابسته به 1% ارتفاع دید)، vmin (وابسته به 1% ابعاد کوچکتر دید)، vmax (وابسته به 1% ابعاد بزرگتر دید)، و درصد هستند.
وضعیت پشتیبانی:
واحد های مطلق ثابت هستند و مقدار بیان شده دقیقا نشان دهنده سایز واقعی است. واحدهای مطلق برای استفاده در صفحه توصیه نمی شوند، زیرا اندازه های صفحه نمایش بسیار متغیر است. با این حال می توان از آنها برای خروجی های مختلف مانند چاپ طرح استفاده کرد. واحد های مطلق عبارتند از : سانتی متر (cm)، میلی متر (mm)، پیکسل (px)، اینچ (in)، pc و pt.
شبه عنصر (Pseudo-Elements) در CSS
شبه عنصر چیست؟
یک شبه عنصر (Pseudo-Elements) در CSS برای نامیدن بخش مشخصی از یک عنصر استفاده می شود. برای مثال در طراحی سایت از یک شبه عنصر برای استایل اولین کلمه و یا خط یک عنصر استفاده می شود. محتوا را قبل و یا بعد از محتوای عنصر اضافه کنید.
ترکیب (Syntax)
نحوه ترکیب شبه عناصر:
selector::pseudo-element {
property:value;
}
شبه عنصر ::first-line
این شبه عنصر برای اضافه کردن یک سبک مشخص به اولین خط متن استفاده می شود. توجه داشته باشید که این ویژگی فقط بر روی عناصر block-level اعمال می شود. در مثال زیر، اولین خط متن در تمام عناصر <p> را قالب بندی می کند.
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
ویژگی های زیر می توانند به شبه عنصر first-line:: اعمال شوند:
• ویژگی های فونت (font)
• ویژگی های رنگ (color)
• ویژگی های پس زمینه (background)
• ویژگی word-spacing
• خاصیت letter-spacing
• ویژگی text-decoration
• ویژگی vertical-align
• ویژگی text-transform
• ویژگی line-height
• ویژگی clear
شبه عنصر ::first-letter
مشابه شبه عنصر first-line:: است با این تفاوت که یک سبک مشخص را برای اولین حرف متن تعیین می کند. این شبه عنصر در طراحی سایت می تواند خواص و ویژگی های زیر را در بر بگیرد:
• ویژگی font
• خاصیت color
• صفت background
• ویژگی margin
• ویژگی padding
• ویژگی border
• خواص text-decoration
• ویژگی vertical-align (تنها در صورتی که مقدار "float" برابر با "none" باشد)
• ویژگی text-transform
• ویژگی line-height
• خاصیت float
• صفت clear
ایجاد دکمه در css
یکی از زبان های برنامه نویسی در طراحی سایت ، cssاست. در این بخش از آموزش css قصد داریم نحوه ایجاد دکمه در css را برای شما علاقه مندان به آموزش طراحی سایت، شرح دهیم پس با ما همراه باشید.
رنگ دکمه
برای تنظیم رنگ دکمه در طراحی سایت از ویژگی "background-color" استفاده می کنیم. این ویژگی در واقع برای تنظیم رنگ پس زمینه دکمه در طراحی سایت مورد استفاده قرار می گیرد. در مثال زیر برای سه دکمه رنگ های سبز، آبی و قرمز تعیین کرده ایم:
.button1 {background-color: #4CAF50;} /* سبز */
.button2 {background-color: #008CBA;} /* آبی */
.button3 {background-color: #f44336;} /* قرمز */
اندازه دکمه
برای تعیین اندازه دکمه در طراحی سایت با css از تابع "font-size" استفاده می کنیم. این ویژگی به منظور تعیین اندازه فونت است که به همان نسبت اندازه دکمه نیز کوچک و یا بزرگ می شود. به مثال زیر توجه کنید:
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
گوشه های گرد دکمه
برای گرد کردن گوشه ها در طراحی سایت ، ساختار "border-radius" به کار می رود. هرچه مقدار اعمال شده به این تابع بیشتر باشد، دکمه بیشتر حالت دایره پیدا می کند:
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
حاشیه رنگی در دکمه
به منظور اضافه کردن رنگ به حاشیه دکمه ها از ویژگی "border" استفاده کنید. مانند مثال زیر:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* سبز */
}
ایجاد هاور برای دکمه
برای تغییر سبک دکمه زمانی که موس بر روی آن قرار می گیرد، باید از سلکتور " hover:" استفاده کنید. برای تعیین سرعت هاور نیز باید از تابع "transition-duration" استفاده شود. ، مانند مثال ذیل:
.button {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* سبز */
color: white;
}
ایجاد سایه برای دکمه
برای این منظور در طراحی سایت باید از ویژگی "box-shadow" بهره ببرید.
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
غیرفعال کردن دکمه
برای غیر فعال کردن دکمه می توان ویژگی "opacity" را به کار برد. این ویژگی یک ظاهر غیرقابل دسترس به دکمه می دهد. علاوه بر این می توانید با استفاده از ویژگی "cursor" و اعمال مقدار "not-allowed" به آن، دکمه ای را ایجاد کنید که در هنگام قرار گرفتن موس بر روی دکمه علامت "no parking" را به شما نمایش دهد.
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
عرض دکمه
به طور پیش فرض عرض دکمه توسط محتوای آن تعیین می شود و هرچه محتوای دکمه بیشتر باشد، عرض آن نیز بیشتر می شود. حال شما می توانید به به کارگیری خاصیت "width"، عرض دکمه را تعیین کنید. مقدار این ویژگی برحسب درصد بیان می شود.
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
ایجاد دکمه های گروهی (Button Groups)
شما می توانید در طراحی سایت با برداشتن حاشیه (margin) در دکمه ها و اضافه کردن "float:left" به هریک از دکمه ها، دکمه های گروی طراحی کنید.
.button {
float: left;
}
شبه کلاس ها (pseudo-class) در css
علاوه بر شبه عناصر (Pseudo-Elements) ، در طراحی سایت با css ، ویژگی دیگری نیز به نام شبه کلاس (pseudo-class) وجود دارند. در این بخش از آموزش css قصد داریم این ویژگی را برای شما کاربران عزیز شرح دهیم.
شبه کلاس ها چه هستند؟
یک شبه کلاس (pseudo-class) در طراحی سایت با css برای تعریف یک حالت خاص از یک عنصر استفاده می شود. برای مثال می توان از آن در طراحی سایت برای موارد زیر استفاده کرد.
• تعیین سبک یک عنصر زمانی که کاربر، موس را بر روی آن عنصر قرار می دهد.
• ایجاد سبک متفاوت بین لینک های دیده شده و لینک های بازدید نشده
• ارائه سبک خاص به یک عنصر ، زمانی که بر روی آن تمرکز می شود
نحوه نوشتن شبه کلاس ها در سند css به شکل زیر است:
selector:pseudo-class {
property:value;
}
شبه کلاس های Anchor
لینک ها را می توان به روش های مختلفی نشان داد. در مثال زیر چند نمونه از روش های نمایش لینک ها در css را ارائه کرده ایم.
/* لینک های مشاهده نشده */
a:link {
color: #FF0000;
}
/* لینک های مشاهده شده */
a:visited {
color: #00FF00;
}
/* زمانی که موس بر روی لینک قرار می گیرد */
a:hover {
color: #FF00FF;
}
/* لینک های انتخاب شده */
a:active {
color: #0000FF;
}
شبه کلاس ها و کلاس ها درCSS
شبه کلاس می توانند با کلاس ها در CSS ترکیب شوند. لازم به ذکر است که شبه کلاس ها در css به کوچکی و بزرگی حروف حساس نیستند.
a.highlight:hover {
color: #ff0000;
}
div:hover {
background-color: blue;
}
شبه کلاس first-child: در css
شبه کلاس first-child: ، یک عنصر مشخص را که اولین فرزند یک عنصر دیگر است، تطبیق می دهد.
تطبیق اولین عنصر <p>
در مثال زیر در طراحی سایت ، سلکتور، هر عنصر <p> که اولین فرزند یک عنصر دیگر است را تطبیق داده است.
p:first-child {
color: blue;
}
شبه کلاس lang: در css
این شبه کلاس، به شما این امکان را می دهد تا قوانین خاصی برای زبان های مختلف در طراحی سایت ، تعریف کنید. در مثال زیر،شبه کلاس lang: ، برای عناصر <q>، با ترکیب "lang="no، علامت کوتیشن را تعریف می کند.
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>
ایجاد نمودار با css در طراحی سایت و مشکلات آن
راه های بسیاری برای نمایش بصری داده ها وجود دارد : نمودار میله ای، نمودار خطی، نمودار پراکندگی و غیره که شما می توانید آنها را در طراحی سایت پیاده نمایید. در این پست قصد داریم شما را با روش ساده استفاده از CSS برای رسم نمودار در طراحی سایت آشنا کنیم.اما بهتر است ابتدا به طور خلاصه ، هدف طراحی سایت را بررسی کنیم.
راهنمایی برای ساخت جدول
برای توسعه یک جدول در طراحی سایت سه دستورالعمل وجود دارد:
• دسترسی: همه باید قادر به دسترسی به داده های شما باشد، حتی اگر جدول شما خسته کننده باشد. دقت داشته باشید که خسته کننده بودن بهتر از عدم دسترسی به اطلاعات است.
• سهولت توسعه: نمودارگیری نباید بدون ضرورت، پیچیده باشد.
• عملکرد: ما باید اطمینان حاصل کنیم که کاربران زمان زیادی را برای دسترسی به دانلود و و یا پیدایش عناصر در صفحه نمایش صرف نمی کنند.
این اهداف و دستورالعمل ها در طراحی سایت بسته به نوع عملکرد، متغیر است.
نمودار میله ای CSS
دو راه برای ایجاد یک نمودار میله ای در طراحی سایت با CSS وجود دارد. در ابتدا ما یک لیست از داده ها را تعریف می کنیم.
<dl>
<dt>عنوان گراف</dt>
<dd class="percentage">
<span class="text">
Date3: 20%
</span>
</dd>
<dd class="percentage">
<span class="text">
Date3: 50%
</span>
</dd>
<dd class="percentage">
<span class="text">
Date3: 30%
</span>
</dd>
</dl>
با استفاده از تگ span، ما کاملا محتوای متن هر تگ dd را در سمت چپ قرار دادیم.برای ایجاد میله ها که به صورت بصری داده ها را نشان می دهد از عناصر شبه استفاده می کنیم. برای انجام این کار ما می توانیم نشانه گذاری های با کلاس های مشابه، به روزرسانی کنیم.
مشکل ایجاد نمودار با css در طراحی سایت
• اگر شما از پس زمینه برای استایل یک عنصر استفاده می کنید، آن عنصر احتمالا در صفحه وب سایت قابل مشاهده نخواهد بود.
• ردیف های جدول دقیقا تثبیت می شوند، از این رو برای توسعه دهندگان وب سایت در آینده به عنوان یک مشکل محسوب می شود.
• در برخی موارد پشتیبانی مرورگر، یک فرآیند دشوار محسوب می شود، و تضمین اینکه تمام دستگاه ها از ویژگی های css پشتیبانی می کنند، می تواند دشوار باشد.
• استفاده از عناصر شبه، در روش درون خطی غیر ممکن است، بنابراین اگر شما بخواهید یک عنصر شبه را با جاوااسکریپت متداول نمایید، پیچیدگی بیشتر خواهد شد.
• انجام هرکاری با css امکان پذیر است، اما هنگامی که قصد ایجاد نمودار خطی منحصرا با css را دارید، احتمالا باید اندکی در داده ای کد تغییراتی را انجام دهیم.
برترین کتابخانه های انیمیشن برای استفاده در طراحی سایت
طراحی سایت مدرن مملو از پیشنهاد های جذاب و شگفت انگیز است. امروزه طراحان وب سایت از طیف گسترده ای از تکنیک ها برای تعامل، سرگرمی، اطلاع رسانی و هدایت بازدید کنندگان خود استفاده می کنند و انیمیشن ها در طراحی سایت کمک می کنند تا به این هدف دست پیدا کنند.
یک دهه پیش توسعه دهندگان به طور معمول از ادوبی فلش برای اضافه کردن تعامل به سایت های خود استفاده می کردند، اما با توسعه سریع کتابخانه های HTML5، CSS3 و جاوا اسکریپت بی شمار، استفاده از فلش تا حد زیادی کاهش پیدا کرد. برای انتخاب انیمیشن به منظور استفاده در طراحی سایت، کتابخانه های انیمیشن زیادی در دسترس هستند که در این مقاله قصد داریم برخی از محبوب ترین آنها را برای کاربرد در طراحی سایت برای شما کاربران عزیز نام ببریم.
1. Animate.css یکی از ساده ترین کتابخانه های انیمیشن CSS برای استفاده در طراحی سایت است.
2. Bounce.js یک ابزار و کتابخانه جاوا اسکریپت است که بر ارائه یک انتخاب ویژه انیمیشن های CSS فنری برای طراحی سایت شما متمرکز است.
3. Magic Animations یکی از چشم گیر ترین کتابخانه های انیمیشن در دسترس است. این کتابخانه دارای بسیاری از انیمیشن های مختلف است، که بسیاری از آنها کاملا منحصر به فرد به این کتابخانه می باشند. به مانند Animate.css، شما می توانید آن را با وارد کردن به فایل CSS در طراحی سایت خود پیاده سازی نمایید.
4. DynCSS، نوعی کتابخانه انیمیشن است که شما می توانید در طراحی سایت خود آن را همراه با اثر اختلاف منظر استفاده کنید.
5. CSShake یک کتابخانه CSS برای تکان دادن عناصر صفحه طراحی سایت شما است.
6. Hover.css یک کتابخانه انیمیشن CSS طراحی شده برای استفاده با دکمه ها و دیگر عناصر UI در طراحی سایت شما است.
7. Velocity.js یک کتابخانه جاوا اسکریپت پیچیده برای انیمیشن ها مانند محو شدن و اسلاید، حرکت، توقف، پایان، معکوس و بسیاری دیگر است.