http___radyoderya.net_showthread.php_48038-css3-background-size-ozelligi-boyuta-gore-kuculup-buyuyen_p_77438_1.xml
1.1 2.1 2.2 3.1 4.1 5.1 6.1 6.2 6.3 6.4 8.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 18.2 19.1 20.1 21.1 22.1 22.2 22.3 23.1 23.2 24.1 25.1 26.1 28.1 29.1 29.2 29.3 29.4 30.1 31.1 32.1 33.1 33.2 34.1 35.1 35.2 35.3 36.1 37.1 38.1 39.1 40.1 40.2 41.1 42.1 42.2 42.3 42.4 43.1 44.1 45.1 46.1 47.1 47.2 47.3 47.4 48.1 49.1 50.1 50.2 50.3 51.1 52.1 53.1 53.2 54.1 55.1 56.1 57.1 57.2 58.1 59.1 60.1 61.1 62.1 63.1 63.2 63.3 64.1 65.1 66.1 66.2 66.3 66.4 67.1 68.1 69.1 70.1 71.1 71.2 71.3 72.1 73.1
11 USEFUL CSS CODE SNIPPETS FOR RESPONSIVE WEB DESIGN Mobile responsive web designs have become extremely popular in the last 2 years, and with a very good reason. As such it’s common to see more code snippets published on the blogosphere, Github repositories, Codepen docs and more. You’ve probably heard about responsive web design these last 2 years, but in a nutshell, it all boils down to this: In this article I would like to share some of the ‘life changing’ CSS code snippets I use on a daily bases, so let’s quit the BS and start hitting the road, Jack! HTML Meta Tags for Responsive Layouts The meta viewport tag is the only one which should be required for responsive layouts. This will set the view on all screens at a 1×1 aspect ratio. This will remove the default functionality from smartphone browsers which render websites at full-view and allow users to zoom into the layout by pinching. The other two tags are supported in Mobile IE and older smartphone browsers, but aren’t necessary for mobile effects in your layout. meta name="viewport" content="width=device-width, initial-scale=1.0"> Media Queries CSS3 supports all of the same media types as CSS 2.1, such as screen, handheld, but has added dozens of new media features, including max-width, device-width, orientation and color. One can create multiple style sheets, as well as basic layout alterations defined to fit ranges of widths — even for landscape vs. portrait orientations. Multiple media queries can also be dropped right into a single style sheet, which is the most efficient option when used: /* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } Max and min width Max-width property allows you to set the max width of the element. The purpose of max-width is to prevent the element from extending the boundary. Min-width is opposite to max-width – it sets the minimum width of an element where the element will never be smaller than the provided value (Max- and min- properties can be applies to height as well). There will be a conflict between max-width and width properties. To ensure that the width will not override and take over write them in the order provided in the following example: .container { width: 800px; max-width: 90%; Flexible Images and Media Another aspect of responsive Web design is flexible images and media. Scaling in CSS is pretty simple to implement for images. You can set the media element’s max-width to 100 percent, and the browser will make the image shrink and expand depending on its container. You should supply the image in the best quality and size possible and then let CSS adapt the image to the right size. img { max-width: 100%; height: auto; } Note: max-width is not supported in IE8 and lower, but a good use of width: 100% would solve the problem neatly in an IE-specific style sheet. One more issue is that when an image is resized too small in some older browsers in Windows, the rendering isn’t as clear as it ought to be. Getting typography to scale Type scales nearly endlessly and reflows into any sized container we give it. Ideally, when our overall layouts scale, so should your type, and here’s a quick and simple example how to do it. We’ll look at how to make your fonts fit your layout nicely no matter what the device or screen width happens to be, the same technique can be applied to headings and/or more complex pages. You can also add breakpoints for your type to control line length, leading and hierarchy, because these are also affected when your container and type sizes change. body { font-size: 100%; font-family:Georgia; } @media only screen and (max-width: 400px) { body { font-size:80%;} } Overflow:hidden Applying overflow: hidden allows you to clear the float from the previous element and keep the content running within the containers as the containers resize to fit a new screen environment. This trick is extremely useful for one of the common problems we face when coding with float based layouts, when the wrapper container doesn’t expand to the height of the child floating elements. But overflow: hidden can also be very useful for images in your responsive web design. You can set a maximum height and crop the image. Put your image in a container and set the width of your image to 100%. Then set the max-height of the container to 450px and hide the overlap by setting the overflow to hidden. .image-wrap { max-height: 450px; overflow: hidden; max-width: 800px; } .image-wrap img { width: 100%; } @media only screen and (min-width: 1160px) { .image-wrap { max-width: 1000px } } If you now change the width of the container, you will see that the image adapts the container’s width but does not exceed the max-height (Read more about this technique: Overflow Image with vertical centering for Responsive Web Design). Automatic line breaks in narrow columns with CSS 3 A problem that has always existed but has become more common lately as more people – thanks to the popularity of responsive web design – make their layouts adapt to narrow viewports, is the lack of automatic hyphenation in web browsers. As columns of text become narrower, the risk of a single word being longer than the column width increases. When that happens, the text normally extends outside the column. The effect can be anything from just a slight visual glitch to unreadable text. Either way it’s something you don’t want to happen. Luckily, CSS offers two properties that can help improve the situation: word-wrap and hyphens. By combining these two properties we can avoid text sticking out of their containers in almost all browsers. Just add the following declarations to a rule targeting any problematic elements: -moz-hyphens:auto; -ms-hyphens:auto; -webkit-hyphens:auto; hyphens:auto; word-wrap:break-word; Full-size Background-Images Since modern designs feature background images a lot, it’s important that they’re properly rendered on different viewing devices as well. To achieve full coverage of the screen by the background image the following CSS code can be used: html { background: url(bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } Here ‘cover’ is the keyword from CSS3 specification which commands that background image is scaled proportionally covering the entire browser window. Responsive Background-Images A neat trick to make it possible for background-images to ‘fluidly’ resize keeping the same aspect ratio and without leaving space below or chopping off the image. The smart move is to set the height to 0 and work out the height depending on the aspect ratio of the image itself and use padding-bottom to reveal the image instead. .background { display: block; height: 0; padding-bottom: 80%; background: url(images/image.jpg) no-repeat; background-size: 100%; text-indent: -9999px; } The percentage in the padding-bottom is the aspect ratio of your image. Divide the height by the width of the image, then multiply it by 100 and you’ve got your exact percentage. If the image height is bigger then the width you’ll have a percentage >100%! Note: I’ve done an experiment with this technique and wrote a tutorial about how to serve different responsive (and Retina-friendly) background-images with various media-queries. Multi-columns There is a very new set of properties which allow for multicolumn creation within an element. These are new properties so you will need to use prefixes as they do not work in all browsers without them just yet. The properties are self explanatory: column-count is the amount of columns you’d like while column-gap is the size of the gap between the columns. Of course, there are other properties but these two are enough for you to get around. @media all and (min-width: 900px) { #example p { -webkit-column-count: 3; -webkit-column-gap: 1%; /* Saf3, Chrome*/ -moz-column-count: 3; -moz-column-gap: 1%; /* FF3.5+ */ column-count: 3; column-gap: 1%; /* Opera 11+*/ } } @media all and (max-width: 900px) and (min-width: 600px) { #example p { -webkit-column-count: 2; /* Saf3, Chrome*/ -webkit-column-gap: 4%; /* Saf3, Chrome*/ -moz-column-count: 2; /* FF3.5+ */ -moz-column-gap: 4%; /* FF3.5+ */ column-count: 2; /* Opera 11+*/ column-gap: 4%; /* Opera 11+*/ } } CSS Flexible Box Layout Module Flexbox is a recommendation in CSS3 that enables designers to control the arrangement of elements on a page with more finesse than contemporary CSS approaches which have become common because we didn’t have a better solution. A Flexbox layout creates a relationship between its containing element — a , for example — and the items the container encompasses. At its most fundamental, Flexbox arranges items in a line that points in any cardinal direction without changing the HTML. For more (and better) information about CSS3 Flexbox, please read: Using CSS flexible boxes /* This is only an example how this CSS property can be used in your CSS file */ aside { background-color: orange; order: 4; flex: 1 ; } .mainContent { background-color: white; order: 3; flex: 2; } .extraDiv { background-color: pink; order: 2; flex: 1; } Note: this CSS property has a limited support in modern browsers, so far it only works on Chrome 21+, Firefox (Gecko) 20.0+, Opera (& Opera Mobile) 12.1+, and Blackberry 10+.
2.1 4.1 5.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1 17.1 18.1 19.1 20.1 21.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1
Üyelik tarihi : 02.Ekim.2003 Mesajlar : 12 Tecrübe Puanı Array CSS3 background-size özelliği boyuta göre Küçülüp Büyüyen reklam http://www.combeki.com/forum - CSS3 background-size özelliği boyuta göre Küçülüp Büyüyen CSS3 background-size özelliği boyuta göre Küçülüp Büyüyen background-size özelliği background-image ile tanımlanan resmin boyutlarını tanımlamamıza yarar. İki değer tanımlandığında ilk değer genişlik için ikinci değer yükseklik için uygulanır tek değer atanmış ise hem genişlik hemde yükseklik için bu değer geçerlidir demektir.Uzunluk olarak standart değerleri alabilir. Yüzde değerler tanımlandığında kapsayıcı elemana göre konumlanır ardalan resmine göre değil. Örneğin genişlik ve yükseklik tanımı olarak 100% tanımlandığında ardalan resmi kapsayıcı elemanın zeminini dolduracak şekilde yayılır. Resmi gerçek boyutlarında kullanmak için auto değeri atanır.Standart değerlerden başka iki farklı değer daha alır: cover ve container değerleri. Her ikiside tarayıcı boyutuna göre orantılı olarak ardalan resmini boyutlandırır.cover: Resmin genişlik veya yükseklik değerinden en küçük olanına göre kapsayıcı elemanın ardalanını tamamen kaplar. Ardalan resmi tüm kapsayıcı elemanın zeminini kaplayacak şekilde ayarlanır ve resmin kalan kısmı kesik görünür.contain: Ardalan resminin genişlik veya yüksekliğinden en büyük olanına göre ardalan alanın içine uydurur. Resmi herhangi bir yerini kesmeden tamamını gösterir ancak bazı bölgeler ardalan resmi olmadan görünür. PHP- Kodu: Yapısı : background-size: [ [,   ] Aldığı Değerler : [   |   | auto ] | contain | cover Başlangıç değeri: auto Uygulanabilen elementler: tüm elementler Kalıtsallık: Yok Yukarıdaki grafikte görüldüğü gibi gerçek resmin genişliği büyük yüksekliği küçüktür. contain tanımlandığında genişlik ve yükseklikten büyük olanı yani burada genişliğin uzunluğu kapsayıcı genişliğine sığıncaya kadar orantılı şekilde küçültülerek atanmış. Kapsayıcı elemanın üst ve at kısmı boş kaldı. cover tanımlandığında genişlik ve yükseklikten küçük olanı yani burada yüksekliğin uzunluğu kapsayıcı genişliğine sığıncaya kadar orantılı şekilde büyütülerek atanmış. Ardalan resminin sağ ve soldan taşan kısımları kesik görünecektir.gif jpeg ve png gibi resim formatları yeniden boyutlandırıldığında pek hoş görüntüler ortaya çıkmıyor. Vektörel resimler(svg) desteği ile daha güzel görüntüler elde edeceğiz. Negatif değerlere izin vermemektedir. background-size:0 değeri resmin görünmemesini sağlar. CSS3 diğer özelliklerinde olduğu gibi background-size özelliğini destekleyen farklı tarayıcılar kendi öneklerini kullanmaktadır. PHP- Kodu: .deneme { background-image: url(bg-image.png); -moz-background-size: 100% 100%; /* Firefox 3.6 */ -o-background-size: 100% 100%; /* Opera 9.5 */ -webkit-background-size: 100% 100%; /* Safari 3.0, Chrome */ background-size: 100% 100%; /* w3c, Firefox 4.0, ie9 */