CSS3 – Text Shadow, Rounded Corners and Multiple Backgrounds

0

CSS (Cascading Style Sheets) has evolved into a powerful tool, allowing you to develop more efficient and better-looking sites. Many of the new features in the latest CSS revision (CSS3) are rich and take the quality of our designs to the next level. In this tutorial, we will show you some basic CSS3 Techniques that you should know.

1, Multiple Backgrounds
CSS3 lets you apply multiple backgrounds to an element using several properties. Included in this list of properties is background-image, background-repeat, background-position and background-size. In order to include these multiple backgrounds within a single element, you must specify the correct properties separated by commas.

2, Resizing Elements:
With CSS3, you can now resize your elements using the resize property. Nice right? The catch: it only works in Safari right now. The following code block makes it possible to have a tiny triangle appear in the bottom right corner of an element that you can then drag to resize.

3, Text Shadows:
The text-shadow property allows you to add a dropshadow underneath HTML text elements. You should always make sure your text is readable in case the user’s browser doesn’t support advanced CSS3 properties.
In the following example, we apply a dark blue (#003471) text-shadow that’s 2px to the right and 5px to the bottom of the text and with a blur of radius of 2px, to all h1 elements.

4, Rounded Corners:
Creating rounded corners can be a bit of a task. However, with CSS3, it can be a breeze when using a new property called border-radius. This property sets the curvature for every corner of the box.
For example, the below code will produce 10px-rounded corners for divs:

 

CSS3 – Text Shadow, Rounded Corners and Multiple Backgrounds
5 - 1187 vote[s]

Same tags:

  1. Fixed Menu When Scrolling & Fixed Navigation Menu Bar
  2. Responsive Tables Bootstrap Examples
  3. Dropdown Menu using Jquery and CSS

Other Posts you may be interested in:

  1. Máy tính văn phòng cần cài những phần mềm gì?
  2. Lý giải vị trí nốt ruồi trên cơ thể con người
  3. Giáng sinh sớm với khuyến mại 75% OFF từ Hostgator
  4. Cách tìm và loại bỏ shell trong mã nguồn
  5. Thủ thuật cho windows 10 chạy nhanh sau khi nâng cấp
  6. Kiểm tra thông tin máy tính với CPU-z
  7. Danh sách IP chuyên đi Spam – IP Blacklist
Cập nhật lúc: 22:17:41 PM, 27th March 2018

Comments

Leave A Reply