I am developing this website.
The problem I am facing is white space on right side of header on zoom in. I did all sorts of things but failed to fill the white with area of header part with black.
Relevant CSS code: (I am not pasting the whole code as it is too lengthy, you can find it in the website)
header
{
float:left;
width:100%;
height:700px;
background:#000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
}
.header_main
{
background: #000000;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 5px;
float:left;
height:800px;
width:100%;
}
There are lot of issues , follow as suggested below:
1 .slideshow{margin: -10px 0 0 50px;} Remove this line from the class .slideshow
2 .headrouter{ padding-left:100px; width:1200px;} Remove padding-left and set width:1100px
3 #site_content {margin-left:50px; } remove margin-left
4 Add overflow-x:hidden to body like below:
body {
background: none repeat scroll 0 0 #FFFFFF;
font: 80% Arial,Helvetica,sans-serif;
overflow-x: hidden;
}
That should resolve the issue.
It is because on your http://www.brilliantseotechnologies.com/css/2nav.css you have width:98% for your ul.menu class
Related
how might I add a shadow effect on a background image, using CSS ? I would like to have a shadow on the left, right and bottom of the background image ?
The command to add the shadow is the "box-shadow". But you can use this site to do this automatically for you:
https://www.cssmatic.com/box-shadow
There's a really handy tool that may help you here https://cssgenerator.org/box-shadow-css-generator.html.
This is an example of a shadow that appears in the areas you mentioned
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
I've made an example for you:
.shadow {
width: 90%;
margin: 20px;
height: 100px;
background: url(https://placekitten.com/640/360);
box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-webkit-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
-moz-box-shadow: 0px 6px 10px 0px rgba(0, 0, 0, 0.57);
}
<div class="shadow"></div>
div {
width: 300px;
height: 300px;
box-shadow: 0 15px 30px #888 inset
}
<div>
</div>
Refer inset property of box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow#Values
In an attempt to create shadows around custom shapes, I discovered the drop-shadow filter CSS property. However after having implemented it, I realised that it slowed the website down significantly.
I am therefore searching for an alternative to gain the same effect without compromising the load speed of the page.
The main content of the site is surrounded by a shadow-box wrapper using a box shadow, but this could not be used for the end section due to the transparent part of the background.
I am trying to achieve a shadow which resembles the shadow of the shadow-box.
Here is a jsFiddle illustrating how it currently looks
and here it can bee seen on the real site
HTML
<div class="container shadow-box no-padding"></div>
<div class="container justify-content-center">
<section class="light-bg end-section" id="portfolio"></section>
</div>
CSS
.container{
width:70%;
margin:auto;
}
.shadow-box{
background:green;
height:200px;
-webkit-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-moz-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-ms-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
-o-box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
box-shadow: 0px 0px 21px 8px rgba(0, 0, 0, 0.6) !important;
}
.end-section {
background: radial-gradient(circle at 50% 100%, transparent 50px, #c1c1c1 50px);
z-index: 5;
height:200px;
filter: drop-shadow(0 30px 15px rgba(0, 0, 0, 0.6))
drop-shadow(0 10px 5px rgba(0, 0, 0, 0.6));
}
.light-bg:before {
content: '';
position: absolute;
z-index: 3;
top: -50px;
left: 50%;
margin-left: -50px;
height: 50px;
width: 100px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
background: #c1c1c1;
}
<div class="myContainer">
Some text...
</div>
Now I only want on the left side and the top of the element a box-shadow.
How can I do this?
I tried this:
.myContainer {
box-shadow: 10px 10px 5px #888888;
}
But this doesn't work.
Like this, See fiddle: https://jsfiddle.net/DIRTY_SMITH/7oe5kh9L/25/
1st number - is the horizontal position (negative is left, positive right)
2nd number - is the vertical position (negative is up, positive down)
3rd number - is the blur radius
4th number - is spread radius
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
HTML
<div class="someDiv"></div>
CSS
.someDiv {
width: 400px;
height: 400px;
background-color: lightblue;
margin-left: 50px;
margin-top: 50px;
-webkit-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: -12px -9px 5px 0px rgba(0, 0, 0, 0.75);
}
This should work :
div
{
width:400px;
height:400px;
left:45px;
box-shadow:-10px -5px 4px #ccc;
}
You can use negative values for the positioning.
box-shadow: -10px -10px 5px 0px #888888;
Use a CSS3 generator to try it out, like this one
Remember to also include the vendor specific prefixes to ensure cross browser compatibility.
-webkit-box-shadow: -10px -10px 5px 0px #888888;
-moz-box-shadow: -10px -10px 5px 0px #888888;
You can check it out with this jsfiddle
If you want to know more about the box-shadow property, then check out MDN box-shadow
Try this
div{
width:200px;
height:200px;
background-color:red;
margin:50px;
box-shadow:-10px -5px 4px #ccc;
}
<div></div>
by default, Blogger's Simple Template comes with a box/shadow around images. You can see them around images in any Blogger blog that hasn't edit it, like this one:
http://conalmadefiesta.blogspot.com.es/
I found a code to completely remove it:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
And also I have found a code to remove it only in some images. Adding the class noborder on the html of every post with an image, and this in the css:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
I want to do JUST the opposite: find a code that doesn't show the shadow by default but that it does when I try add a class (let's say: border) to the image.
Any ideas on how can I do this?
Thanks!
You got it yet! You've got the code to remove the shadows, so thinking a little you can make the opposite (I'm using :not() pseudoselector in CSS):
/* remove all boxshadows except tags with "border" classname */
.post-body img:not(.border), .post-body .tr-caption-container:not(.border), .Profile img:not(.border), .Image img:not(.border),
.BlogList .item-thumbnail img:not(.border) {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
So if you need to put a box shadow in some img you can add border class:
<img src="img.png" class="border">
It works!
See more information about :not() selector:
https://developer.mozilla.org/es/docs/Web/CSS/%3Anot
you should like this -
.post-body img.noborder , .Profile img.noborder , .Image img.noborder , .BlogList .item-thumbnail img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
or you can use !important-
img.noborder {
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0) !important;
}
Maybe you just need to create an other class called .border with:
.border {
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}
And then add this class to images that you want with shadows.
In this case, you should ignore this:
img.noborder {
border: 0px;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
box-shadow: 0px 0px 0px rgba(0, 0, 0, .0);
border-radius: 0px 0px 0px 0px;
background: none;
}
And leave:
.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
padding: none !important;
border: none !important;
background: none !important;
-moz-box-shadow: 0px 0px 0px transparent !important;
-webkit-box-shadow: 0px 0px 0px transparent !important;
box-shadow: 0px 0px 0px transparent !important;
}
Here, the images will not have shadows except for those with .border
So I've been using Html5 and CSS3 for the past 6 months+ but have just now started running into some pixel misses between firefox(17.0.1) and chrome(23.0.1271.101). I have a CSS reset that I tried but no change. It's weird in that in chrome (pic right side) it's 2 pixels in and in firefox (pic left side) it's 2 pixels out.
See for yourself here http://jsfiddle.net/976a3/2/
CSS:
body
{
margin: 0px 0px 0px 0px;
background:rgba(75, 75, 75, 1);
color:#c0c0c0;
}
#container
{
margin:0px auto;
padding:0px 0px 0px 0px;
width:300px;
height:350px;
}
#contact_info
{
margin:0px 0px 0px 75px;
padding:15px 15px 15px 15px;
width:270px;
height:150px;
border:1px solid black;
color:black;
background:rgba(200,200,200,1);
border-radius:20px;
box-shadow:7px 7px 12px rgba(0,0,0,1);
}
.title
{
font-size:1.3em;
margin:-10px 0px 0px -30px;
padding:4px 0px 0px 10px;
width: 235px;
height:30px;
color:white;
background:rgba(22,22,22,1);
border-top-right-radius:10px;
border-bottom-right-radius:10px;
text-shadow:0 0 3px rgba(192, 192, 192, 1);
box-shadow: 0 0 2px rgba(255, 255, 255, 0.1) inset,
0 5px 10px rgba(0, 0, 0, 0.5) inset,
0 4px 6px rgba(255, 255, 255, 0.2) inset,
1pt 16px 0 -2px rgba(255, 255, 255, 0.2) inset,
0pt 16px 10px rgba(0, 0, 0, 0.3) inset,
0pt 1px 0px rgba(0, 0, 0, 0.2);
}
.title:after
{
top:40px;
left:-163px;
position:relative;
z-index:-2;
content: "";
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 10px solid rgba(22, 22, 22, 1);
}
Html:
<div id="container">
<div id="contact_info">
<p class="title">CONTACT INFO</p>
<br />
</div>
</div>
Any fixes or ideas?
Thanks
Instead of giving the .title:after position:relative, you can try giving it position:absolute; and give .title position:relative;
http://jsfiddle.net/976a3/3