I want to create box shadow using CSS but in a specific area of the box only.
As shown in the screenshot above, I have blue header on a site and to that header, I want to add a shadow in a specific position as highlighted with red box.
I am guessing that using psuedo element :after on header div should work but I don't know how to add shadow with specific styling. I mean if you notice, the shadow is blurred on left and right.
You can refer some css shadow generator website like http://www.cssmatic.com/box-shadow to make shadow to particular area.Hope this may helps you.
Thank you.
You can try something like this:
div {
width: 300px;
height: 1px;
position:relative;
margin-top:-1px;
box-shadow: 10px 10px 5px #888888;
}
Related
The problem is i need photoshop-like selection functionality. But when I add border to div that encloses the image, the image gets smaller by the thickness of the border x2.
How can i resolve that?
I tried, making
.picture-frame--image {
border: 5px solid red;
margin: -2px 0 0 -2px;
}
<div>
<img class="picture-frame--image" src="https://placehold.it/500x500">
</div>
<div>
<img src="https://placehold.it/500x500">
</div>
but the image is overlapping border, and i need otherwise. For some reason z-index won't work, i dont know why.
Accualy the best answer was made by cimmanon in nathaniel link.
I made:
img {
outline: 2px dashed violet;
outline-offset: -2px;
}
Thank you all for the answers. Really appreacie it.
It sounds like you need to add
* {
box-sizing: border-box;
}
to your css file. I'm not entirely sure though because you didn't post any code.
Check this site for more information: https://www.w3schools.com/css/css3_box-sizing.asp
I think what you are looking for are pseudo elements like ::after and ::before. With these you can add content around your element. But beware that these can only be applied to certain html tags. ::after MDN Documentation
See this StackBlitz
I have a td which adds a hover class when I hover the mouse over it:
.hover{
border: 1px solid #364861;
background: #5979a0 url(img.png) 50% 50% repeat-x;
font-weight: bold;
color: #ffffff;
border-radius: 10px;
}
For some reason I can't figure out, the border attribute wasn't taking effect. I randomly added
float: left;
to the class, and now it works...
It works, so I'm happy, but I don't know why.
I can't recreate the problem in a fiddle, there must be some class somewhere in my DOM that's having an effect on my td. But I just don't know how a float would effect the border-radius of an element.
I did not know these to attributes were linked in any way.
This is because a td cannot have border-radius. When you give it a float it breaks out of it's table structure and become a seperate element that has it's own structure, so you will see the border-radius.
i don't see a use case for a table cell with rounded corners. So it sounds likeyou are misusing the table/td tags. If it's not table data, don't put it in a table structure. Just use div's with rounded corners.
I'd like to decorate the bottom of my page with a repeated triangle. The picture shows one triangle, but I want to fill the whole horizontal div.
Screenshot of what I've got so far: http://i.stack.imgur.com/JJA6D.png
<div class="container triangle"> </div>
.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 15px 15px 0 15px;
border-color: #c2cf31 transparent transparent transparent;
background-color: white;
}
Is this possible or do I have to use an img as background?
Thank you for any help.
Use a background image in your CSS-
background:url("http://site.com/img/whatever.svg");
And then set it to repeat only horizontally-
background-repeat:repeat-x;
This means that yes, you do have to use a background image.
You could clone the element using jQuery or something but I don't think it's worth it.
background-image:url('your image url');
background-repeat:repeat-x;
My opinion is to use background images in CSS if they are not being used as links etc. Basically, if you aren't fussed about the SEO on those images. With that in mind, just use some CSS for your image.
background-image: url("yoururl/image.jpg") repeat-x;
As it has been mentioned you could technically use JQuery's clone method. This is a bad idea. Why add extra things for the page to do when CSS handles it.
If you want to experiment, there's a CSS property that gives you the ability to use an element (your triangle div in this case) as a background image. This property is the background:element().
You can see a demo here in Firefox.
However, this property works only in Mozilla with the -moz- prefix but there have been attempts to work in webkit browsers as well. So, hopefully this can be implemented in the future with wider browser support.
use the img as background and let it repeat.
I have to say that I like background images more instead of the image in the html code.
This is cause people can't copy them easily as the image in the html code
I've had a similiar issue like this before and trying to finally get it corrected. If you notice in the js fiddle there seems to be a thicker border above the actions div and I'm trying to find out why there is and there isn't in the template that I purchased.
http://jsfiddle.net/pGFfa/
Template:http://kansasoutlawwrestling.com/files/templates/admin/peachv1.2/Template/forms.html
EDIT:
I updated my page with the real intended page but look at the actions area and there still is a border on the left and right. Not sure why.
The double border is because of the bottom border of the content div. The div in the template has rule ".box .content.with-actions" applied which says "border-bottom: 0 none;". The content div in your fiddle doesn't have that rule so it has a bottom border and also the actions div has a top border hence the thicker line appearance.
The difference is that the content div in the template also has the "with-actions" class while the one in your fiddle doesn't. Just add that class and the problem disappears.
Updated fiddle http://jsfiddle.net/7jrEp/2/
As a note, when your css is linked externally any changes you make to the actual css changes every fiddle we post. It's better to paste the css into fiddle so it doesn't break.
And the problem as noted above was a double border plus the radius being applied to the bottom and not the top of the form container.
In content.css, try changing:
.box .content-form { border: 1px solid #C8C8C8; }
to:
.box .content-form { border: 1px solid #C8C8C8; border-bottom: none; }
i'm doing a web app for iPhone, i'm having some troubles with borders.
To simplify things i have a background image for body, a box with rounded corners which have some elements inside and a title, and that's where problems begins as i want my title to be on the top border of my box without having the borderline behind it.
Here is a screenshot :
I can't see any solutions to render it properly, some of you have any guess ?
It would be much appreciated
From what I can gather, it looks like you should be using the fieldset element (as you are "grouping" form elements together), which conveniently also looks the way you want it to:
<fieldset>
<legend>Promoter</legend>
<select>
<option>Choose a promoter</option>
</select>
</fieldset>
Styling is simple. Align the legend text and style the fieldset border using CSS:
fieldset {
border: 1px solid black;
border-radius: 5px;
}
legend {
text-align: center;
}
For a live example, see this jsFiddle demo.
Not sure if there is a simple pure css based solution.
A method that somewhat achieves what you want is to have text shadow on the text floating above the border, using a color that blends with the general color of the background. You can tweak the values such that the border will (at least mostly) fade away behind the text. This will of course also fade away the background image, replacing it with the color of the shadow, but it might look fairly nice anyway. (Having a more solid background for the text will make it easier to read, too).