Say I want to simulate 2 different layers of objects, over a background. Objects on the first level should have a large shadow, and objects on the second layer should have a smaller shadow.
Now, what if an objects on the front layer is overlapping an object on the second layer? Then it should have a large shadow on the background, but a smaller shadow on the second layer object.
Here's an example of what I'm looking for:
Can this effect be achieved with CSS? Even SVG filters, or something like that maybe? Any ideas?
you may use a pseudo to increase part of a shadow:
div {
height: 150px;
padding-top: 50px;
margin: 3em;
width: 300px;
box-shadow: 2px 2px 5px;
}
p {
margin: 2em;
position: relative;
box-shadow: 2px 2px 5px;
height: 50px;
width: 500px;
background: white;
}
p:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 265px;/* offset value to mind */
box-shadow: 5px 5px 5px #333;
pointer-events:none; /* takes it off the way, else negative z-index might do also */
}
<div>
<p>
</p>
</div>
size, margin and padding for demo purpose, use real content :)
Related
Explanation:
I modified a CodePen I found online and now it looks like this.
https://codepen.io/anon/pen/YQqdPq
As you can see on the leftmost side of the table, the shadow shows which is good, but it has the same border as its parents.
I've tried putting border: 0px; in pseudo elements but this doesn't seem to do anything.
Question:
Can I remove the border from the shadow you see on the left and righthandside of the table? Ideally I'd like the border to still overlay the shadows inside, but if this is too fiddly then I can live without that.
Code Excerpt:
Here is the CSS in question
.shadow {
position: relative;
}
.shadow:before {
box-shadow: -15px 0 15px -15px inset;
content: " ";
height: 100%;
top: 0;
left: -15px;
position: absolute;
width: 15px;
}
.shadow:after {
box-shadow: 15px 0 15px -15px inset;
content: " ";
height: 100%;
position: absolute;
top: 0;
right: -15px;
width: 15px;
}
That's not a border. That's a 1px gap between the pseudo elements which looks like a border of 1px.
You can fix it in many ways, the way I would do it is to increase the height of the pseudo element by 1px to cover the gap.
.shadow:before {
height: calc(100% + 1px);
height: -webkit-calc(100% + 1px);// (optional) for older webkit browsers
height: -moz-calc(100% + 1px);// (optional) for older firefox browsers
}
same thing for the ones on the right .shadow:after.
If you're interested, you can learn more about calc.
I'm trying to create a body border for my site that has a gap near the top for the logo, yet is completely closed at the bottom. I can only seem to do one or the other.
Here is what I am looking for, Body Border example:
Here's the approach I've been taking. A simple body wrapper with before/after psuedo elements.
HTML
<html>
<body>
<div class="borderWrap>
<header> Logo resides here </header>
<main> content goes here </main>
</div>
</body>
</html>
CSS
.borderWrap{position: relative; }
.borderWrap:after, .borderWrap:before {
border: 0.125em solid ;
bottom: 20px;
content: '';
position: absolute;
top: 35px;
width: 40.5%;
bottom: -50px;
}
.borderWrap:after {
border-left: none;
right: 40px;
}
.borderWrap:before {
border-right: none;
left: 40px;
}
This gives me a dynamic border as I need, but it still leaves a gap at the bottom. How do I go about closing it? Should I use a different method alltogether?
I've taken a different approach of just applying a regular border to 'borderWrap' and centering the header within it, then applying a negative top margin and a solid white background.
https://jsfiddle.net/partypete25/xvhb4kuf/
.borderWrap {
position: relative;
margin:35px auto 20px;
width:81%;
border: 0.125em solid;
}
header {
width:80px;
background:#fff;
margin:-20px auto 0;
}
Here is one way of doing it using pseudo-elements.
You can control the width of the white-gap using calc(50% + 40px) for example, where 40px is the half-width of the desired gap width, using
this value for the left and right offsets for the absolute positioned pseudo elements.
You could simplify things by simply using a percentage value for the offsets in case you don't want to use the CSS calc function.
The advantage of this approach is that if you have any background colors or images, they will show through the gap in the top border.
In my example, I illustrate how to create the border. How you will use it in your layout will depend on how you build your page, but the approach is the same.
.borderWrap {
position: relative;
height: 400px;
border: 2px solid black;
border-top-width: 0;
}
.borderWrap:before, .borderWrap:after {
content: '\A0';
border-top: 2px solid blue;
position: absolute;
top: 0;
}
.borderWrap:before {
left: 0;
right: calc(50% + 40px);
}
.borderWrap:after {
right: 0;
left: calc(50% + 40px);
}
<div class="borderWrap"></div>
I have a rectangular sprite image that is 120px x 40px. When someone select the image I want the right side of the selected image to turn into an arrow pointing right.
I know how to use border-radius but that gives a curves whereas I want a point.
Using css how would I turn the right side of an image into a arrow?
Thanks
Basically I want to perform a border-radius only on the right side, but instead of curved pointed like an arrow.
.selected {
-webkit-border-radius: 0px 25px 25px 0px;
border-radius: 0px 25px 25px 0px;
}
If you can keep the white background here is a very simple solution:
jsFiddle here
Run the image in the background of the following example.
HTML
<div class="container"></div>
<div class="container"></div>
<div class="container"></div>
CSS
.container {
background: #333;
width: 200px;
height: 60px;
position: relative;
overflow: hidden;
margin-bottom: 10px;
}
.container:hover::after {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
top: -20px;
right: -20px;
z-index: 1;
transform: rotate(45deg);
}
.container:hover::before {
content: "";
position: absolute;
width: 70px;
height: 30px;
background: #fff;
bottom: -20px;
right: -20px;
z-index: 1;
transform: rotate(-45deg);
}
I do not know, i understood your question, but i think, what you want to achive, can be done by jQuery and css function with background-position
Basically, if you want to use a CSS Sprite image, background-position will indeed do it.
You may want to have a <div> positionned over your image, that will be displayed on hovering (CSS :hover) or click (jQuery click event) the image, depending on what you meant by "selecting" it.
Here is an example for hovering case (pure CSS) and here is an example for the clicking case (with 3 lines of jQuery).
I came across this page of a themed website that has form field labels with triangles on one side:
http://www.openblackbelt.com/app/index.php?action=profile
A triangle technique is a nice accent to break up the monotony of forms without the usual rounded border or some other getting-over-used approach.
The only problem is, I can't seem to actually determine how the triangular accenting is done. I don't see any use of :before or :after, and there is only one html element <label> involved as far as I can tell. Can anyone do a breakdown of how to perform this technique on my own?
It's nothing but a small div positioned relative containing absolute positioned div using CSS Triangles. I've made a demo from scratch, you can check this out.
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div span {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
If you want to save an element, you can use :after pseudo(won't work in IE), you can try this
Demo
div {
height: 30px;
width: 200px;
background: #f00;
position: relative;
}
div:after {
height: 0;
width: 0;
display: block;
position: absolute;
right: -30px;
content: " ";
border-bottom: 30px solid #f00;
border-right: 30px solid transparent;
}
No span tag required here.
Explanation: I am just using an absolute position element with a height and width set to 0 and am using borders around the element, making one a transparent, thus creating that triangle shape. And than I use right to position it correctly.
They do it by giving it a border-bottom:24px; and border-right:24px; by positioning the div absolute
#feitla is on the right path, #Kzqai specific what you asked for is achieved as below:
CSS:
.contact-form label {
border-right: 24px;
}
HTML:
<label for="openbb_username">Enter your email address</label>
I'm creating a 2 tier drop down, menu and sub-menu, and I'm having an issue with either positioning, relative or absolute, and or floats. I've played around with absolute and the space/gap goes away, but my sub-menu's don't fly-out next to the hovered item, only the first. I tried relative and float both produce the undesired gap, but the sub-menu fly's out next to the hovered item as I want. Here's the code where I believe is where the issue is. Note, I created a JSFIDDLE so you can see the working code example:
Here's the JSFIDDLE that has the HTML and CSS. I put the code that has the gaps, but has the correct fly-out positioning. If I need to clarify things more clearly, let me know and I'll try.
Troubled code - I think
.sub-navigation-content {
position: relative;
margin: 0 0 0 150px;
top: -10px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
Below are screen shots of what I want it to look like:
Correct looking fly-out, but incorrect fly-out position:
Incorrect looking fly-out, but correct fly-out position:
Thanks in advance for having a look :)
So So ... You can use absolute position, but you need remove top: -10px;.
final class for sub-navigation-content:
.sub-navigation-content {
position: absolute;
margin: 0 0 0 150px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
I think its work good. And you can move fly-out list to top by change margin as you need, i e:
.sub-navigation-content {
position: absolute;
margin: -35px 0 0 150px;
width: 180px;
background-color: #fff;
border: 1px solid #ccc;
z-index: 999;
visibility: hidden;
box-shadow: 0 5px 10px 0 #999;
}
Just give your .sub-navigation-content class an absolute positioning instead of relative.
.sub-navigation-content {
position: absolute;
}
You would surely also adjust the top to has at least a value of 0.