PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Tue Sep 26, 2017 9:36 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 7 posts ] 
Author Message
PostPosted: Wed May 24, 2017 11:31 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
Attachment:
File comment: Example of what I am after
shadow.jpg
shadow.jpg [ 10.52 KiB | Viewed 869 times ]

I can do shadow below things, and behind text, which is how I did the shadow behind these icons, but could the shadow (done here in graphic form, below the balls), be done in CSS?

So the width and colour and thickness can all be tweaked.??????????

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 11:43 am 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
Not sure if you can background-image an image (or else use a container) but that would be the most versatile way. Make sure the main image is transparent, background image centered on the bottom.

If the image can be cropped correctly so that it doesn't overlap with the shadow, like your examples do, then a bottom border as an image would work too.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 12:21 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
So do a background image and position it below the icon doc?
How do I position a background image like that?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 12:29 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
You don't position it "below". It's a background image so it goes in the background. It appears behind the icon. You create a shadow image of the size you want, then use CSS to set it as the background image and more CSS to position it center-bottom.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 12:35 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
Sure but to get it dead right, how do you position and image pixel perfect?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 1:27 pm 
Offline
Spammer :|
User avatar

Joined: Wed Oct 15, 2008 2:35 am
Posts: 6556
Location: WA, USA
You can't. "Pixel perfect" is the bane of web design so stop thinking that way.

If the icon is positioned in its image correctly and the shadow is positioned in its image correctly then the end result will look the way you want it to.


Top
 Profile  
 
PostPosted: Wed May 24, 2017 1:59 pm 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4335
Location: United Kingdom
The icon has a line height set.
The DIV in which it sits, has a 50% border radius with the same width and height as the icon.
The DIV sits inside another DIV, that has a H3 below it. So I guess I have to place the image in the containing div, at the 'bottom centre'. And just play with the image position (within it's white space) to get it correct.

Shame there is no CSS way to do it.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group