So I was playing around with some CSS, and wanted to give my titles a specific style. What I was thinking about was something like the image I made here:
I tried to google for people who wanted the same, but I couldn't really find what I was looking for.
This is what I have so far:
.test {
position: relative;
font-size:40px;
height:40px;
width:400px;
}
.test>span {
display: block;
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
height: 60%;
color: #31FF5A;
}
.test>.top{
z-index:2;
top:0;
}
.test>.bottom{
color: black;
height: 100%;
z-index:1;
bottom: 0;
}
<div class="test">
<span class="top">TEXT</span>
<span class="bottom">TEXT</span>
</div>
Any one of you who can help me out? Or atleast in the right direction :P
Thanks!
Use border radius property.
.test {
position: relative;
font-size:40px;
height:40px;
width:400px;
}
.test>span {
display: block;
overflow: hidden;
position: absolute;
left: 0;
width: 100%;
/* height: 60%; */
color: #31FF5A;
border-bottom-left-radius: 90%;
}
.test>.top{
z-index:2;
top:0;
}
.test>.bottom {
color: black;
height: 100%;
z-index: 1;
bottom: 0;
border-bottom-right-radius: 346%;
}
<div class="test">
<span class="top">TEXT</span>
<span class="bottom">TEXT</span>
</div>
Related
I'm trying to create something like this:
enter image description here
My code is like this which only curves the bottom border and I cannot put any content in it and it hasn't got any bottom dropshadow either:
.curvedbox {
position:fixed;
top:0; left:0;
width:100%;
background:none;
height:10%;
padding-bottom:20%;
overflow:hidden;
z-index:1;
}
.curvedbox:after {
content:'';
position:absolute;
left:-600%;
width:1300%;
padding-bottom:2300%;
top:80%;
background:none;
border-radius:50%;
box-shadow: 0px 0px 0px 9999px #526375;
z-index:-1;
<div class="curvedbox"></div>
Could someone please advice on this?
Thanks in advance.
Consider separating the content into three parts:
Part 1: element for the upper or outer curve
Part 2: an element to specifically contain any content
Part 3: an element for the lower or inner curve (which we'll declare
an inset box-shadow property to)
Nest these parts within a containing element, as demonstrated with the code snippet embedded below.
Code Snippet Demonstration:
* {
box-sizing: border-box;
font-family: arial;
}
.containing-curves {
position: fixed;
top: 0;
left: 0;
width: 100%;
max-width: 300px;
background: none;
overflow: hidden;
}
.inner-curve {
height: 50px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
background: #d2d2d2;
position: absolute;
left: 0;
right: 0;
bottom: -25px;
box-shadow: inset 1px 1px 5px 3px #505050;
}
.inner-content {
display: flex;
justify-content: space-evenly;
height: 100%;
align-items: center;
background: gray;
position: relative;
margin-top: 25px;
padding-bottom: 25px;
}
.outer-curve {
height: 50px;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
background: #808080;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.inner-content span {
width: 100%;
text-align: center;
}
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css">
<div class="containing-curves">
<div class="outer-curve"></div>
<div class="inner-content">
<span><i class="fa fa-cloud"></i></span>
<span>text</span>
<span><small>text</small><br><small>text</small></span>
</div>
<div class="inner-curve"></div>
</div>
If you are open to a different way of doing it...
.curvedbox {
position:fixed;
top:0;
left:0;
width:100%;
background:none;
height:10%;
padding-bottom:20%;
overflow:hidden;
z-index:1;
}
.curvedbox:before, .curvedbox:after{
content:'';
position:absolute;
top:0;
left:50%;
transform:translateX(-50%);
width:1200%;
height:0;
padding-bottom:1300%;
border-radius:50%;
}
.curvedbox:before {
background-color:#526375;
}
.curvedbox:after {
top:90%;
background-color:white;
}
<div class="curvedbox"></div>
It's hacky and the top value of .curvedbox:after might need to be changed depending on your needs.
How can I put a floated text above an absolute positioned image? The property z-index does not seem to work here.
Example: (jFiddle)
.box {
z-index: 1;
background-color: red;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px
}
.text {
float: left;
z-index: 2;
}
<div style='position:relative'>
<span class='text'>Hello</span>
<div class='box'>
</div>
</div>
Just add position: relative; to your text's CSS.
Just as a side-note you'll need to keep the z-index properties you've put too.
Or alternatively (but I wouldn't suggest it), add z-index: -1; to the box, and remove z-index from the text.
.box {
z-index: 2;
background-color: red;
position: absolute;
top: 0;
left: 0;
height: 200px;
width: 200px;
}
.text {
float: left;
z-index: 999;
color: #fff;
position: relative;
}
<div style='position:relative'>
<span class='text'>Hello</span>
<div class='box'>
</div>
</div>
Just adding Position:Relative will work out in your code:
.box{
z-index:1;
background-color:red;
position:absolute;
top:0;
left:0;
height:200px;
width:200px
}
.text{
float:left;
z-index: 2;
color: black;
position: relative;
}
I want a div with some text in it.
In that div I also want a div that matches the same position and proportion.
I found multiple things on stackoverflow but as soon as on thing is different it doesn't work for me.
Right now, I can't see the text anymore. Why?
It would be great if the solution doesn't affect the css for '#container'.
html:
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>
css:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}
for the fiddlers:
https://jsfiddle.net/clankill3r/8kaLj2su/
Add z-index: -1 to your background image.
https://jsfiddle.net/8kaLj2su/2/
A proper way to do it would be Don't use z-index at all
Change the logical order of your elements:
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
And than simply set your p to relative:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:relative;
}
.background-img {
position: absolute;
background: url(http://lorempixel.com/420/255) 50% / cover;
width: 100%;
height: 100%;
}
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
Use z-index to select which element overlays the other.
Working example:
(JSFiddle)
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
z-index:2;
position:relative;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
z-index:1;
}
<div id="container">
<p>Somt text to screw with me</p>
<div class="background-img"></div>
</div>
p {
color: blue;
z-index:1;
position:relative;
}
Basically Z-index:1 will push the text on top and Position is necessary for z-index to work in most cases. I would not suggest -1 as incase if you have any text for that div it may be hidden too.
If you want to see your background image with text:
https://jsfiddle.net/xeyw0hvc/
Code:
#container {
position: fixed;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
z-index:10;
}
p {
color: blue;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url('http://lorempixel.com/420/255');
z-index:-1;
}
p {
color: blue;
z-index: 9999;
}
Using z-index, like others have suggested is fine. But I have found z-indexing to be a bit buggy, especially on legacy browsers such as older versions of IE. I would approach this differently. Change the order of your markup, make the parent container position:relative, then make both of the child elements position:absolute. That way you avoid using z-index altogether.
Like so: https://jsfiddle.net/4x5nkwgb/
HTML
<div id="container">
<div class="background-img"></div>
<p>Somt text to screw with me</p>
</div>
CSS
#container {
position: relative;
left: 10px;
top: 30px;
width: 100px;
height: 50px;
background: red;
}
p {
color: blue;
position:absolute;
top:0;
left:0;
display:block;
}
.background-img {
position: absolute;
background-size: cover;
background-repeat: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: url(http://lorempixel.com/420/255);
}
I have div inside a div as below
<div id="locations">
<div id="h-dragbar"></div>
</div>
and css as below
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: -1;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
but hover on div with id h-dragbar is not working. You can test the code here demo.
What am I doing wrong? Thanks in advance.
In the new example jsFiddle which you've provided, you're setting a z-index of -1 to the parent div i.e. #locations which is why you're unable to perform the hover function on its child div i.e. #h-dragbar. You will need to remove the negative z-index on #locations and then it'll work fine.
Update:
I've checked your latest fiddle and instead of using a negative z-index for #locations in order to give priority to #v-dragbar, you can achieve the same by using a high z-index for #v-dragbar, for e.g. z-index: 9999, and a relatively smaller z-index for #locations, for e.g. z-index: 9998. It'll work perfectly this way. Here's a demo:
body {
width: 100%;
height: 500px;
}
#wrapper {
width: 100%;
height: 100%;
}
#explorer {
width: 13%;
min-height: 100%;
height: 100%;
position: relative;
float: left;
}
#v-dragbar {
background-color: black;
height: 100%;
float: right;
width: 2px;
cursor: col-resize;
z-index: 9999;
position: relative;
}
#h-dragbar {
background-color: black;
width: 100%;
height: 2px;
cursor: row-resize;
position: absolute;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover {
background-color: blue;
}
#v-dragbar:hover {
background-color: blue;
}
#locations {
height: 50%;
width: 100%;
position: relative;
z-index: 9998;
/*imp*/
}
<div id="wrapper">
<div id="explorer">
<div id="v-dragbar"></div>
<span style="clear: both;"></span>
<div id="locations">
<div id="h-dragbar"></div>
</div>
<div id="datapoints">
</div>
</div>
<div id="explorer">
</div>
</div>
It's not working because of the negative z-index - you're basically putting the whole thing behind the body element, rendering it non-hoverable, non-clickable, etc. We can't help further without more context, but you'll need to change your strategy a bit for this to work.
Your example works fine…
However, try:
#h-dragbar:hover{
background-color:blue !important;
}
If now it works, for you, it means that some other CSS instance has priority.
If you cannot make a positive z-index, make a z-index: 0; and check. It works:
#locations {
height: 50px;
width: 100%;
position: relative;
z-index: 0;
}
#h-dragbar{
background-color:black;
width:100%;
height: 3px;
position: absolute;
cursor: row-resize;
bottom: 0;
z-index: 999;
}
#h-dragbar:hover{
background-color:blue;
}
<div id="locations">
<div id="h-dragbar"></div>
</div>
This problem bothering me very long, and I try to figure the solution, but I just can get it.
I have background image on div tag, and on that image I have part with text, which I want to select to be a link.
So I try it this way #signUp is a a element which is positioned in div #main_text:
#signUp {
display:block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
}
#main_text {
width: 840px;
height: 335px;
background-color: white;
margin: auto;
position: relative;
}
The problem is that this code works fine in all browsers excepting the IE, on IE signUP is not clickable, any solutions, thanks.
This is html part :
<div id="main_text">
<?php if (function_exists("easing_slider")){ easing_slider(); }; ?>
</div>
see the mentioned below code its working on IE also IE8+
HTML
<div id="main_text">
Sign Up
</div>
CSS
#signUp {
display:inline-block;
width:137px;
height:100px;
position:absolute;
left:31px;
top:289px;
background:red;
color:black;
text-align:center;
}
#main_text {
width: 840px;
height: 335px;
background-color: green;
margin: auto;
position: relative;
}
DEMO
This should work in IE6, IE7 and newer. http://jsfiddle.net/uPeWh/
I think the problem was the z-index of the containers.
#signUp {
z-index: 20;
display: block;
width: 100px;
height: 100px;
position: absolute;
left: 50px;
top: 50px;
background-color: red;
font: 1em Arial;
color: white;
}
#main_text {
z-index: 10;
width: 300px;
height: 200px;
margin: 0;
padding: 0;
position: relative;
background-color: grey;
}
<div id="main_text">
Click me
</div>