Trying to figure out how I add a shadow to 3 images I have central on my page, looks a little weird without one I believe.
At the moment my HMTL code for this is below:
<div id="imagesMain">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\Gym.jpg" id="gym">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\me.jpg" id="me">
<img src="C:\Users\User\OneDrive\Desktop\Cal\Photos\NFL.jpg" id="nfl">
</div>
and my CSS code for these images is also below:
#imagesMain {
padding: 0;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
text-align: center;
padding-top: 5px;
}
#imagesMain img {
height: auto;
width: 10%;
vertical-align: middle;
border-radius: 50%;
padding: 5%;
padding-bottom: 0;
padding-top: 5px;
}
Thanks, Callum
Try using this filter: drop-shadow(1px 14px 5px rgb(14, 17, 17)); and adjust the shadow according to your needs...
You can do that by using a box-shadow generator for CSS3.
CSS3 box-shadow generator
You need to copy the box-shadow and add it to the image.
For images, I'd use a box-shadow property :
div {
box-shadow: 10px 10px 5px grey;
}
The first two arguments are about the height/width of your shadow box, third argument is about the blurring effect and last one is the color of your shadow.
Related
I'm working on a website that has a 3-dot menu button in the top. Each of these dots is 4 pixels wide and height, has border-radius: 100% and margin set to 2 pixels.
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 100%;
border: 0;
padding: 0;
display: inline-block;
margin: 2px;
}
<div class="dot"></div>
In Chrome 73, it is neither rounded, nor its proportions are 1:1 as you can see on the following picture. It works perfectly, however, on Safari and Firefox.
https://ibin.co/4gvT3AAmOLRr.png
https://ibin.co/4gvTRW3jy4jD.png
Anyone has an idea how to fix it? If I make it bigger or increase the margin, it displays it correctly, but I would like to keep these sizes. Thanks!
-- UPDATE --
This is the minimal code that reproduces the error for me.
<style>
.menu-toggle{
display: flex;
border: 0;
background: transparent
}
.menu-toggle .dot{
background: black;
width: 4px;
height: 4px;
border-radius: 100%;
border:0;
padding: 0;
display: inline-block;
margin: 2px
}
</style>
<nav id="site-navigation" class="main-navigation">
<button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><span class="dot"></span><span class="dot"></span><span class="dot"></span></button>
</nav><!-- #site-navigation -->
Also, if it helps, I am using MacBook Pro (Retina, 15-inch, Late 2013) with NVIDIA GeForce GT 750M 2 GB, Intel Iris Pro 1536 MB and the external screen is LG 27UD88-W. The error is on both screens.
-- UPDATE 2 --
It does the same problem even if I disable the border-radius, the dots aren't the same width: https://ibin.co/4gvn4EJHniRz.png
Also, I found out, that if I go to inspect mode and I toggle the device, it works perfectly.
border-radius should be 50% for a circular shape.
Also you need to make sure the contents of the circle takes up no space.
As soon as the circle has visible contents, it will turn into a tube (as the width expands).
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 50%;
border: 0;
padding: 0;
font-size: 0;
display: inline-block;
margin: 2px;
}
.wrong {
border-radius: 100%;
}
<div class="dot"></div>
<div class="dot wrong"></div>
I wasn't actually able to reproduce your non-circle, but this may be the browser compensating for your mistake.
The first thing you gotta do is to change your border-radius to 50%. If you still fail to achieve the desired pure circle, try masking it with a single pixel like so:
-webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%);
I recently came up to the same issue.
People up-top are right. Border-radius should be 50% to make a circle.
In my case background-clip: padding-box; did the trick.
The difference may not be visible in code snippet here but it is visible in my project, especially when zooming in a bit on my browser. (Chrome in my case). Don't know what are the reasons for this minor issue.
Here's the relative CSS Tricks article that helped me.
And a code snippet that utilizes: background-clip: padding-box;
.dot {
background: black;
width: 4px;
height: 4px;
border-radius: 50%;
border: 0;
padding: 0;
font-size: 0;
display: inline-block;
margin: 2px;
}
.wrong {
border-radius: 100%;
}
.perfect {
/* Prevent background color leak outs,
helps to create a perfect dot and not a square-ish dot */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}
<div class="dot"></div>
<div class="dot wrong"></div>
<div class="dot perfect"></div>
I am doing a website in wordpress. And under the navigation I have container(id="cover_photo") for image(id="cover_photo_image).I center it with margin but I want to move it down, and center it in the container, but the container follow if I put margin on it.
HTML
<div id="cover_photo">
<p id="cover_photo_image">
</p>
</div>
CSS
#cover_photo {
width: 100%;
height: 278px;
background-color: #6b0c0b;
box-shadow: inset 0px 0px 3px 0px #888, 0px 0px -3px 0px #888;
}
p#cover_photo_image {
width: 821px;
height: 172px;
display: block;
margin: 0 auto;
margin-top: 6px;
background-image: url(images/cover_photo.png);
}
Plopped your code into a fiddle and saw what you mean. The problem is that you haven't set positioning for #cover_photo or #cover_photo_image. The outer element needs to be relative, the inner needs to be an absolute.
#cover_photo {
position: relative;
}
p#cover_photo_image {
position: absolute;
}​
I changed the sizes so it would fit into the preview, and if you try adjusting the margin values it should move around and not move the #cover_photo container.
http://jsfiddle.net/ESCNm/
Just in case you're are looking to automatically vertically and horizontally align an element within an element, there are a LOT more methods that manual positioning. Manual positioning is such a hassle, and I try to avoid absolutes whenever possible.
Here an article about it: http://www.vanseodesign.com/css/vertical-centering/
About vertical and horizontal centering.
You can use Flex.
Please add the following code
#cover_photo {
display: flex;
justify-content: center;
align-items:center;
}
p#cover_photo_image {
border: 1px solid black;
background-repeat: no-repeat;
background-image: url(https://cdn.sstatic.net/Img/teams/teams-illo-free-
sidebar-promo.svg?v=47faa659a05e);
background-size: contain;
background-position: center;
}
This should be the effect you want.
enter image description here
At the moment I have a layout that pulls a number of thumbnails into a grid - each is defined by a style that keeps them a fixed ratio, (roughly 16:9) which is defined by pixel dimensions (389px x 230px) but they are looking a bit small on high-res screens.
The images are actually pulled into the DIV as a background that covers 100% width and height of the DIV and then the DIV's obviously control the aspect and size.
What I am looking to do is have these DIV's dynamically resize based on the page size of the device but to keep the ratio of the DIV's.
Is this possible?
My thoughts would be to set the width based on the percentage of the page but then I'm not sure how I would set the height and keep the correct aspect ratio (due to different resolutions etc.)
What would be the best way to do this?
EDIT - Thanks for all your ideas so far, thought maybe I should show you how I'm pulling in the data at the moment.
In my HTML I've got the following code which generated the grid
<a class="griditem" href="../video.php?video=13" style="background-image:url(../video/Relentless/Relentless.jpg); background-size:100% 100%;">
<div class="titles">
<h5>Relentless Short Stories</h5>
<h6>Frank Turner: The Road</h6>
</div>
This is styled with the following CSS
.griditem {
position: relative;
float: left;
margin-right: 17px;
margin-bottom: 17px;
background-color: #777;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
width: 389px;
height: 230px;
text-align: left;
}
.titles {
padding: 5px;
position: absolute;
bottom: 10px;
left: -1px;
right: -1px;
background: transparent url(../images/layout/white80.png) top left;
-moz-border-radius: 1px 1px 0 0;
border-radius: 1px 1px 0 0;
text-align: left;
}
The reason I'm implementing it this way is so that the Div can float over the bottom of the image.
Just a quick idea which might be useful for you.
It is based on the fact that vertical padding/margin use the WIDTH of the parent box when it is set to percentages, so it is possible to resize a div relative its parent box
http://jsfiddle.net/xExuQ/2/
body,html { height:100%; }
.fixed-ratio-resize {
width: 50%; /* child width = parent width * percent */
padding-bottom: 50%; /* child height = parent width * percent */
height: 0; /* well, it is not perfect :) */
}
​If you want to put some (non-background) content into this nicely resized box, then put an absolutely positioned div inside it.
Reference:
http://www.w3.org/TR/CSS2/box.html#margin-properties and
http://www.w3.org/TR/CSS2/box.html#padding-properties says:
Margins: "The percentage is calculated with respect to the width of the generated box's containing block. Note that this is true for 'margin-top' and 'margin-bottom' as well. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
Paddings:"The percentage is calculated with respect to the width of the generated box's containing block, even for 'padding-top' and 'padding-bottom'. If the containing block's width depends on this element, then the resulting layout is undefined in CSS 2.1."
EDIT
http://jsfiddle.net/mszBF/6/
HTML:
<a class="griditem" href="#" style="background-image: url(http://pic.jpg);">
<span class="titles">
<span class="name">Unicomp Studios</span>
<span class="title">Springs Buckling (2012)</span>
</span>
</a>
CSS:
.griditem {
float: left;
margin-right: 17px;
margin-bottom: 17px;
min-width: 100px; /* extremely narrow blocks ==> crap looking */
width: 30%;
background: blue no-repeat;
background-size: contain; /* from IE9 only: https://developer.mozilla.org/en/CSS/background-size */
border: 1px solid transparent; /* prevent .titles:margin-top's margin collapse */
}
.titles {
/* <a> elements must only have inline elements like img, span.
divs, headers, etc are forbidden, because some browsers will display a big mess (safari) */
display: block; /* so display those inline elements as blocks */
padding: 5px;
margin: 0 auto;
margin-top: 105%;
background: yellow;
}
.titles > span {
display: block;
}​
I know this might not be the best solution, but
<html>
<style type="text/css">
#cool{
width:40%;
background:blue;
padding-bottom:10%;
}
</style>
<div id="cool" >
</div>
</html>
Here Ive used padding-bottom, to maintain its height relative to its width. U can set padding-bottom as a percentage. Hope this helped.
The problem only affects IE (Mine's 9) and as it's shown there are unwanted paddings on each side of the img tag.
Here's the CSS:
.imgclass {
position:relative;
top: 10px;
left: 60px;
border: 1px solid #666;
box-shadow: #666666 0px 0px 3px;
border-radius: 5px;
opacity: 0.9;
}
And so far I've tried img>padding 0& img>display>block & img>vertical-align.
Screenshot: http://i.stack.imgur.com/u2K4E.png
Thanks in advance
try adding the below to your imgclass in CSS
filter:alpha(opacity=90);
padding: 0;
and also check for padding in parent element
you can adde specifically that padding = 0
padding: 0;
also it would be good to know what class/attributes are applied to the div/element containing the image as if it is larger then padding may not be the issue? perhaps specify a specific width and height if you can to prevent css guessing.
tab-ver.tab {
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
<div id="tab-ver" class="tab">English</div>
The problem of above script is that the a link doesn't work at all. If the user clicks the 16by16.png image, the user is not redirected to yahoo.com.
However to fix this problem?
Thank you
// update001//
I have tried the following suggestion:
#tab-ver.tab {
text-indent: -10000em;
}
#tab-ver.tab a{
background: url(../images/16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
display: block;
}
It works for my original problem. However, the displayed image now is offset to bottom of the horizontal menu. It is caused by 'display: block'. However, if I remove 'display:block', then the image will be invisible.
thank you
// update 1 //
Based on the suggestion, the following script works best for me
#tab-en-ver.tab a {
background: url(../images//16by16.png) no-repeat center center;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
text-indent: -10000em;
}
However, this suggestion does have one problem. The text 'English' mixes with the image. I cannot figure out how to remove the text 'English' from a link.
by adding the following extra rule will cause the image disappear.
#tab-ver.tab {
text-indent: -10000em;
}
any idea?
Give that CSS to the <a> instead. Add a display: block so it'll display as a block-level element like the <div>. The <div> will expand to fit the <a>.
EDIT: try inline-block instead and see if it helps.
#tab-ver.tab a {
display: inline-block;
background: url(../images/16by16.png) no-repeat center center;
text-indent: -10000em;
height: 16px;
width: 16px;
padding: 4px 1px;
margin-right: 1px;
margin-left: 50px;
}
If you want the text ("English") to be hidden, than you have to use <img/> tag, with an alt attribute, something like:
<img src="english-flag.png" alt="English" />
You can also use some CSS hacks, but:
What for? It's so easy to do it with plain HTML!
Those are hacks, so they may work or not in different browsers.
One of such hacks can be to set a background to the <a/> element, to offset the text, to set the overflow to hidden, and to set fixed width:
a{
padding-left:16px;
overflow:hidden;
display:block;
width:16px;
height:16px;
url(../images/16by16.png) no-repeat left top;}
English
You can have the a tag fill up the div by using:
a {
display: block;
height: 16px;
}
You can then also remove the height from the div as it will grow automatically.