מרכוז אובייקט

נתחיל עם משהו ממש פשוט שהרבה מתחילים לא מצליחים לעשות, מרכוז אובייקט. אם נרצה למרכז אובייקט במרכז העמוד שלנו ניתן את ההגדרה הזו:

div
{
margin:auto;
display:block;
width:100px; //נגדיר רוחב כלשהו
}
אני ממורכז

הוספת מסגרת כפולה
אפשר להשתמש ב-Outline כדי ליצור מסגרת נוספת ל-border כך:

div
{
border:4px solid #4285f4;
padding:10px;
outline: 4px solid #ff6666;
}

 

מסגרת כפולה

 

רקע צבע שקוף עם אלמנטים מעל ללא שקיפות
הסיבה העיקרית שנשתמש בשיטה הזו היא שאם ניתן שקיפות ל-DIV מסויים, אז כל התוכן שבתוכו הופך אוטומטית לשקוף גם הוא, כדי למנוע את זה נשתמש בקוד RGBA כאשר RGB אלה הצבעים ו-a  alphaמסמל את השקיפות מ-0 ועד 1. לדוגמה כאן 0.5 יתן אובייקט שקוף למחצה.

div
{
background:rgba(0,129,200,0.5);
color:#ffffff;
padding:10px;
}
טקסט בצבע מלא על רקע חצי שקוף


עיבוי פונט בעזרת קו
נניח ורציתם פונט עבה יותר ממה שקיים פשוט תוסיפו מסביבו קו בצבע הפונט עם ההגדרות הבאות:

span
{
-webkit-text-stroke: 1px #000000;
}

* כרגע עובד רק בכרום

טקסט עבה ללא בולד


הוספת טקסט דמו לתיבות טקסט
הרבה פעמים נראה מן טקסט דמו כזה בתוך תיבת טקסט למשל בשדה של "שם" יהיה כתוב באפור בתוך השדה "נא מלאו שם פרטי ושם משפחה" וכשנתחיל להקליד הטקסט יעלם, בקיצור ככה עושים את זה ב CSS.

<input type="text" placeholder=" נא מלאו שם פרטי ושם משפחה "/>

איפוס צבע לכל הלינקים
דבר מרגיז שקורה בד"כ עם לינקים הוא שאוטומטית כל לינק יקבל קו תחתון, צבע כחול ובלחיצה צבע סגול, כדי לאפס את זה ניתן את ההגדרות הבאות:

a
{
color:inherit;
text-decoration:none;
}

קישור עם הגדרות ברירת מחדל
קישור ללא הגדרות ברירת מחדל

כך הצבע שנקבל יהיה מותנה תמיד בצבע שהגדרנו למה שמכיל את הלינק, למשל אם הלינק מופיע בתוך ה-Body ול-Body נתנו צבע פונט אדום אז כל הלינקים מעכשיו יקבלו בירושה את הצבע האדום.

צל לטקסט
אפשר כבר ליצור צל לטקסט ואין צורך להשתמש בתמונות לשם כך, ההגדרה נראית מורכבת בהתחלה אבל למעשה ממש הגיונית:

span
{
text-shadow: 2px 2px 10px #333333;
}

טקסט עם צל

ההגדרה עובדת כך: צבע, טשטוש, ציר Y, ציר X

צל לאובייקט
אפשר כמובן גם ליצור צל לאובייקט בצורת ריבוע:

div
{
box-shadow:0px 0px 10px #ebebeb;
}

גם כאן ההגדרה עובדת כך: צבע, טשטוש, ציר Y, ציר X

 

אובייקט עם צל