Hi there, it’s me again.<\/p>\n
Today, i’m gonna talk about CSS3 border features.<\/p>\n
By using CSS3, you can;<\/p>\n
without using a design program like Adobe Photoshop or some javascript plugins.<\/p>\n
In CSS3 creating rounded borders is a piece of cake. Just apply following css code to your elements.<\/p>\n
Usage:<\/p>\n
-webkit-border-radius: 5px 5px 3px 3px;\n-moz-border-radius:\u00a05px 5px 3px 3px;\n -ms-border-radius:\u00a05px 5px 3px 3px;\n -o-border-radius:\u00a05px 5px 3px 3px;\nborder-radius:\u00a05px 5px 3px 3px;<\/pre>\nSyntax:<\/p>\n
\nborder-radius: top-left-radius, top-right-radius, bottom-right-radius, bottom-left-radius;\n<\/p><\/blockquote>\n
You can see there are various codes for each browser.<\/p>\n
Briefly,<\/p>\n
Mozilla Firefox needs “-moz-” prefix,<\/p>\n
Chrome and Safari needs “-webkit-” prefix,<\/p>\n
Opera needs “-o-” prefix,<\/p>\n
Internet Explorer needs “-ms-” prefix (will be deprecated),<\/p>\n
and for last “border-radius” code is used for general CSS3 border styling.<\/p>\n
CSS3 Box Shadow<\/h4>\n
With CSS3 you can use “box-shadow” property to add shadow to boxes.<\/p>\n
Usage:<\/p>\n
-webkit-box-shadow: 0 0 5px #d5d5d5;\n -moz-box-shadow: 0 0 5px #d5d5d5;\n box-shadow: 0 0 5px #d5d5d5;<\/pre>\nSyntax:<\/p>\n
box-shadow:\u00a0h-shadow v-shadow blur spread color<\/em>\u00a0inset;<\/p><\/blockquote>\n
As you see, you should add “-webkit-” prefix for Safari and Chrome, “-moz-” prefix for Mozilla Firefox and lastly “box-shadow” property for general CSS3 Shadow effects.<\/p>\n
Syntax:<\/p>\n
box-shadow: (horizontal dimension of shadow, can be a negative value), (vertical dimension of shadow, also can be a negative value), (shadow blur amount), (hex code of shadow color)<\/p><\/blockquote>\n
CSS3 Border Image<\/h4>\n
To create border images for your elements, you should use border-image property.<\/p>\n
Right now, Internet Explorer does not support border-image property.<\/p>\n
For other browsers you should add prefixes just like other border properties(ex. “-moz-“, “-webkit-“, “-o-“)<\/p>\n
Usage:<\/p>\n
-moz-border-image:url(border.png) 30 30 round;\n -webkit-border-image:url(border.png) 30 30 round;\n -o-border-image:url(border.png) 30 30 round;\n border-image:url(border.png) 30 30 round;<\/pre>\nSyntax:<\/p>\n
border-image:\u00a0source slice width outset repeat<\/em>;<\/p><\/blockquote>\n
border-image-source: the path to the border image file.<\/p>\n
border-image-slice: inward offsets of the border image.<\/p>\n
border-image-width: width of border image.<\/p>\n
border-image-outset: the amount by which the border image area extends beyond the border box.<\/p>\n
border-image-repeat: type of repetition, repeat, round, stretch.<\/p>\n
That’s all for now.<\/p>\n
I’ll tell more about javascript equivalents of CSS border properties for fallback support \u00a0and other CSS3 features later.<\/p>\n
Enjoy your CSS3 styles, and have a nice day.<\/p>\n","protected":false},"excerpt":{"rendered":"
Hi there, it’s me again. Today, i’m gonna talk about CSS3 border features. By using CSS3, you can; create rounded borders (it was really a big problem cause we had to use images or junk javascript libraries) box shadows (it was also a big problem) use image files as border without using a design program […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","footnotes":""},"categories":[508,435],"tags":[504,505,506,507,509,510,511,512],"yst_prominent_words":[2166,2151,2162,2168,2160,2152,2153,2159,2164,2158,2156,2155,2161,2165,2169,2170,2154,2163,2167,2157],"class_list":["post-413","post","type-post","status-publish","format-standard","hentry","category-css","category-web-developer","tag-border-image","tag-border-radius","tag-box-shadow","tag-cascading-stylesheets","tag-css-2","tag-css3","tag-developer","tag-web"],"jetpack_featured_media_url":"","uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"ckaraca","author_link":"https:\/\/www.veriteknik.net.tr\/en\/author\/ckaraca\/"},"uagb_comment_info":0,"uagb_excerpt":"Hi there, it’s me again. Today, i’m gonna talk about CSS3 border features. By using CSS3, you can; create rounded borders (it was really a big problem cause we had to use images or junk javascript libraries) box shadows (it was also a big problem) use image files as border without using a design program…","_links":{"self":[{"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/posts\/413","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/comments?post=413"}],"version-history":[{"count":0,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/posts\/413\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/media?parent=413"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/categories?post=413"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/tags?post=413"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.veriteknik.net.tr\/en\/wp-json\/wp\/v2\/yst_prominent_words?post=413"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}