I'm working on a small web project and got a nice little detail on the page: a curved content divider. Usually those are just lines, but this is not. So I was thinking about, how to code that in CSS or possibly with SVG, but I'm not sure exactly how it could work. Here you can see what I mean:
As you can see, the gray content above ends exactly with the orange curve and the white content part beneath start along the curve. Is there any way to code it with css or svg, instead of using images?
Thank you! I highly appreciate any help.
This was my best with CSS rounded corners ... can get better
.divider {
width: 100%;
height: 51vw;
position: relative;
overflow: hidden;
background: #fff;
}
.divider:after,
.divider:before,
.divider b:after,
.divider b:before {
content: "";
display: block;
position: absolute;
}
.divider:after {
width: 63.7%;
height: 62.5%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
border: red 2px solid;
border-right: transparent 2px solid;
}
.divider:before {
width: 63.6%;
height: 63.7%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
background: #eee;
}
.divider b {
display: block;
width: 50%;
height: 100%;
background: #eee;
}
.divider b:after {
width: 63.7%;
height: 62.5%;
border-radius: 0 0 50% 50%/50%;
right: -7.5%;
top: -4px;
border: red 2px solid;
border-left: transparent 2px solid;
}
.divider b:before {
width: 63.6%;
height: 63.7%;
border-radius: 50% 50% 0 0/50%;
bottom: -4px;
left: -7.5%;
background: #fff;
}
<div class="divider"><b></b></div>
Related
I am trying to achieve something like this:
When I hover over an image, I would like to put on that image this dark color with some text and the icon.
I am stuck here. I found some tutorials but they didn't work out for this case.
Also, another issue -- every image has a different height. The width is always the same.
How can this effect be achieved?
You can achieve this with this simple CSS/HTML:
.image-container {
position: relative;
width: 200px;
height: 300px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
HTML
<div class="image-container">
<img src="http://lorempixel.com/300/200" />
<div class="after">This is some content</div>
</div>
Demo: http://jsfiddle.net/6Mt3Q/
UPD: Here is one nice final demo with some extra stylings.
.image-container {
position: relative;
display: inline-block;
}
.image-container img {display: block;}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
color: #FFF;
}
.image-container:hover .after {
display: block;
background: rgba(0, 0, 0, .6);
}
.image-container .after .content {
position: absolute;
bottom: 0;
font-family: Arial;
text-align: center;
width: 100%;
box-sizing: border-box;
padding: 5px;
}
.image-container .after .zoom {
color: #DDD;
font-size: 48px;
position: absolute;
top: 50%;
left: 50%;
margin: -30px 0 0 -19px;
height: 50px;
width: 45px;
cursor: pointer;
}
.image-container .after .zoom:hover {
color: #FFF;
}
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>
<div class="image-container">
<img src="http://lorempixel.com/300/180" />
<div class="after">
<span class="content">This is some content. It can be long and span several lines.</span>
<span class="zoom">
<i class="fa fa-search"></i>
</span>
</div>
</div>
You could use a pseudo element for this, and have your image on a hover:
.image {
position: relative;
height: 300px;
width: 300px;
background: url(http://lorempixel.com/300/300);
}
.image:before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transition: all 0.8s;
opacity: 0;
background: url(http://lorempixel.com/300/200);
background-size: 100% 100%;
}
.image:hover:before {
opacity: 0.8;
}
<div class="image"></div>
Putting this answer here as it is the top result in Google.
If you want a quick and simple way:
filter: brightness(0.2);
*Not compatible with IE
A bit late for this, but this thread comes up in Google as a top result when searching for an overlay method.
You could simply use a background-blend-mode
.foo {
background-image: url(images/image1.png), url(images/image2.png);
background-color: violet;
background-blend-mode: screen multiply;
}
What this does is it takes the second image, and it blends it with the background colour by using the multiply blend mode, and then it blends the first image with the second image and the background colour by using the screen blend mode. There are 16 different blend modes that you could use to achieve any overlay.
multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color and luminosity.
.bg-img{
text-align: center;
padding: 130px 0px;
width: 100% !important;
background-size: cover !important;
background-repeat: no-repeat !important;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.86)), url(your-img-path);
}
I have a peculiar problem of tab content not floating on right side as its tabs are on right side too. Below is the picture to get a better idea:
I have tried floating the tab content right but not working. Rather its going past right where I can't see anything. This problem exists for both Live Chat and Mail Us tabs.
Below is the codepen.
HTML Code
<div class="tab-pane livechat wow animated bounceInLeft" id="chat">
<div class="chatwidget">
Click for Chat
</div>
</div>
CSS3
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
float: right;
}
.chatwidget {
padding: 150px;
font-size: 24px;
}
To right align an absolute positioned element, use right: 0; instead of float: right, float has no effect on absolute positioned elements.
Updated codepen
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
right: 0;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
}
Instead of float:right, use right:0px;
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}
Before you add position: absolute to the livechat element you should add position: relative to its one of parent elements as below mentioned. Better it is to body tag. And put right: 0; instead of float: right;.
body{
position: relative;
}
.livechat {
position: absolute;
bottom: 0px;
width: 50%;
background-color: #eee;
height: 370px;
text-align: center;
box-shadow: 0 0 20px grey;
right: 0;
}
I'm looking to create an active page marker like the one pictured. The title probably doesn't do a great job of describing what I'm trying to do here.
What I'm looking for is a border that has an curved triangle active page marker using CSS.
Here is a simple solution using to <div> tags only.
Setting the width of both container wil set the triangle on different placeses.
body {
margin:0;
width: 100%;
}
* {
box-sizing: border-box;
}
.right {
float: left;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 40px 0;
}
.left {
float: right;
border-bottom: 5px solid black;
width: 50%;
height: 100px;
border-radius: 0 0 0 40px;
}
<div class="right"></div>
<div class="left"></div>
This is a relatively simple way to achieve the result using a single corner border radius on two small divs with a bottom border - to move the 'triangle', you only need to adjust the left position of the `container' element. It's not perfect, as the border fades towards the tip of the pointer, but it may pass the aesthetics test:
#line {
border-bottom: 3px solid #888888;
position: relative;
width: 500px;
height: 53px;
}
#container {
position: absolute;
bottom: -2px;
left: 200px;
width: 100px;
background: #ffffff;
}
#left,
#right {
float: left;
border-bottom: 3px solid #888888;
height: 50px;
}
#left {
width: 50px;
border-radius: 0 0 50% 0;
}
#right {
width: 50px;
border-radius: 0 0 0 50%;
}
<div id="line">
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
EDIT: The display in the sandbox seems to be inconsistent - here's a FIDDLE
You could play with before, after & border-radius to achieve it.
See an example here: http://codepen.io/anon/pen/RNqPpy
Sliding is coming from center because i have given width:100%; left: 50%; .
Slide is coming from left to right, but i want this to start from right to left. I suspect this is a CSS issue. I tried changing CSS but nothing helps. Please someone locate the mistake and help me to proceed. Thanks
FIDDLE
Css Code:
.sidebar_list
{
float:left;
display: none;
position: fixed;
width:100%;
top: 57px;
bottom: 0px;
left: 50%;
right: 0px;
overflow: hidden;
line-height: 2em;
border-left: 1px solid black;
border-bottom: 1px solid black;
padding: 10px;
height: 100%;
color: #ffffff;
background: #33B5E5;
}
$(".logo").click(function()
{
$(".sidebar_list").animate({
width: 'toggle'
}, 200)
});
remove left:50% from your css. It works
Working fiddle
I am making a pop up on one of my project.
CSS Code
<style type="text/css">
#modalPage
{
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(0, 0, 0, 0.95);
z-index: 999;
}
.modalContainer
{
position: absolute;
width: 100%;
height: 100%;
left: 50%;
top: 50%;
z-index: 999;
}
</style>
Content CSS
.modal
{
background-color: #6f9255;
position: relative;
top: -300px;
left: -305px;
z-index: 1000;
width: 600px;
overflow:auto;
}
JAVASCRIPT Code
<script type="text/javascript">
function myFunction() {
document.getElementById('modalPage').style.display = "block";
}
function hideModal()
{
document.getElementById('modalPage').style.display = "none";
}
</script>
HTML Code
<div id="modalPage">
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
But the problem is that, it is fine but the opacity or page background which I putting on it, it is displaying on half page, not on full page.
Displaying by this code. background-color: rgba(0, 0, 0, 0.95);
Please tell me, where is the problem.
I can't keep the position fixed, because my pop up is longer then original page size and it is coming with scroll and cross the footer link too.
Any help will be appreciated.
Thanks
I think the problem is not related with an opacity issue. You say that your .modalContainer is 100% width and height but you start it at 50% top left. So the whole thing is 150% width and height, while #modalPage is only 100% width and height.
If you know the exact width and height of your container I suggest you to simply modify your css to center propertly the container. For example:
.modalContainer
{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 999;
background-color: red; /*added to see where the container is*/
}
Working example:
http://jsfiddle.net/L2cXP/
If you want a modal longer than the page itself, i suggest a new approach.
We can ignore vertical centering because the modal is longer than the page. We just want that #modalPage has a overflow: auto property so it will show a scrollbar when its contents are longer than it.
Probably you would like to add an overflow: hidden property to the body when the modal shows to block the standard scrollbar of your page.
Check this working example:
http://jsfiddle.net/L2cXP/1/
try:
#modalPage {
position: fixed;
}
http://jsfiddle.net/68Sty/
.modalContainer has a "left" of 50%, so starting at halfway is expected. Try something like:
.modalContainer {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
right:0;
bottom:0;
z-index: 999;
}
try this
<div id="modalPage">
<div class='relative'>
<div class="modalContainer">
<div class="modal"> </div>
</div>
</div>
</div>
your css
.relative{
position:relative;
zoom:1;
height:100%;
width:100%;
}
A little CSS magic - and we have simple and nice CSS popups with no javascript positioning! consider this demo:
HTML:
<div id="modalPage" class="csspopup-overlay">
<div class="modalContainer csspopup-popup">
<div class="csspopup-close" onclick="hideModal()">×</div>
<div class="modal">Some modal content</div>
</div>
</div>
I define .csspopup-overlay and .csspopup-popup in CSS as follows:
.csspopup-overlay {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
text-align: center;
}
.csspopup-overlay:after, .csspopup-valignfix {
display: inline-block;
*display: inline;
*zoom: 1;
height: 100%;
width: 0;
vertical-align: middle;
content: '';
}
.csspopup-popup {
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
max-width: 80%;
padding: 15px;
box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
background: #FFF;
vertical-align: middle;
border-radius: 6px;
}
.csspopup-popup > .csspopup-close {
display: block;
position: absolute;
top: -15px;
right: -12px;
width: 12px;
height: 12px;
padding: 4px;
border: 4px solid #fff;
border-radius: 50%;
box-shadow: inset 0 2px 2px 2px rgba(0, 0, 0, 0.2), 0 2px 5px rgba(0, 0, 0, .4);
cursor: pointer;
background: #555;
color: #FFF;
text-align: center;
font-size: 12px;
line-height: 12px;
text-decoration: none;
font-weight: bold
}
Demo: http://jsfiddle.net/acA73/
Note: I extracted these CSS for you from https://github.com/dfsq/cssPopup jQuery plugin.