Viewing Applying styles (shadow/border) to images using CSS
Applying styles (shadow/border) to images using CSS
|
User: Christopher 12 years ago
|
|
|
I read earlier that if we apply styles to an image using the functions offered in EW, it converts the image to a png before publishing. This is because jpeg doesn't allow transparency. But the downside of this is that the png file size will be much larger than the original jpeg and jpegs maintain a wider colour spectrum. For those reasons, especially the first (which translates to slower download times), I'm leery of applying anything to my jpeg photos. Can someone (Roddy, Paul) give us some CSS examples and tell us how to apply this to individual photos on the page? eg: 1. apply border to a particular image on a page (not everything) 2. apply shadow to an image on a page Thanks! ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
EasyWeb inserts images as the background of a div whereas it's more normal to insert them using an img tag. Which method would you prefer sir? If you are going to have several images with the same style per page, or on the site in general, you would create a class and insert the CSS into the appropriate Head Code box. This is more efficient. <style type="text/css">... and use this in the snippet... <img src="{!-ASSETSPATH-!}Images/image-file-name.jpg" alt="Alt Text Goes Here" class="my-image" />Otherwise you can use inline styles on a per image basis... <img src="{!-ASSETSPATH-!}Images/image-file-name.jpg" style="width: 400px; height: 300px; background: #eee; padding: 10px ; border: 1px solid #bbb ;-moz-box-shadow: 3px 3px 3px #ccc;-webkit-box-shadow: 3px 3px 3px #ccc; box-shadow: 3px 3px 3px #ccc;" alt="alt image text" title="Tooltip Text" />
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Christopher 12 years ago
|
|
|
Awesome, sir Roddy! This forum would be doomed to a litany of unanswered queries if it wasn't for your Scottish genius! One question. Retina @2x images? Can I just add two links after src= separated by a comma, or is it more complicated than that? If so, I imagine it will be easier sticking with EW's method. ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
OK, that's enough of the flattery! I'm very capable of being stupid and, just to prove it, I have no idea how to insert standard/retina images. No doubt there's a javascript for that! At this point in time I'm not sure that there are enough retina machines around to justify doing this - which is not to say that you shouldn't if you really want to. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 12 years ago
|
|
|
Apparently all modern browsers use bicubic resampling which does a great job with downsampling images. All you need to do is force the retina image into a half sized space. Example using an image 800px wide by 600px high... <img src="{!-ASSETSPATH-!}Images/image-800x600-2x.jpg" style="width: 400px; height: 300px">
------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
Quote: At this point in time I'm not sure that there are enough retina machines around to justify doing this - which is not to say that you shouldn't if you really want to. Most mobile devices including iPhones and iPads should have retina images. Quote: All you need to do is force the retina image into a half sized space. Example using an image 800px wide by 600px high... This is one way to do it but requires that all browser, even non retina browsers, download the larger image. ------------------------------- Paul EverWeb Developer |
|
|
User: Christopher 12 years ago
|
|
|
What's the other way to do it? [quote="Paul-RAGESW":2wcx6p26]Quote: At this point in time I'm not sure that there are enough retina machines around to justify doing this - which is not to say that you shouldn't if you really want to. Most mobile devices including iPhones and iPads should have retina images. Quote: All you need to do is force the retina image into a half sized space. Example using an image 800px wide by 600px high... This is one way to do it but requires that all browser, even non retina browsers, download the larger image.[/quote:2wcx6p26] ------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Paul-RAGESW 12 years ago
|
|
|
It gets complex. Your best bet is to just let EasyWeb handle it as it will take care of all the retina stuff for you. PNG files are a bit larger but they will be cached by your web browser. In this case I would highly recommend ease of use over the increase in file speed. Plus in a future version of EasyWeb will provide automatic optimization of image/html files. I don't believe it is worth the effort for the file size benefit at this point. ------------------------------- Paul EverWeb Developer |
|
|
User: Christopher 12 years ago
|
|
|
Okay. One request then: can you add SPREAD to the shadow options? I'm starting to like using negative spread and am incorporating that into my overall style.
------------------------------- rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display www.cleetche.com |
|
|
User: Roddy 12 years ago
|
|
|
Here's some info about box shadows and using negative spread... http://roddymckay.com/EasyWeb/test/box-shadow.html You will also find out how the internet works and see the Scottish Police in action. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |