I don't know if it is tricky.
Here is a jsFiddle simple <div>hello</div>:
Is there any easy way to color the top left pixel of that div in red?
Thank you.
You can do this :
div:before{
position: absolute;
width:1px;height:1px;
background:red;
content:'';
}
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
Demonstration (with a bigger red dot, so that it's obvious)
For browser compatibility you could add a span inside your div:
<div><span></span>hello</div>
Then add styling:
div {
border:1px solid green;
height:200px;
background-color:yellow;
position:relative;
}
div span {
position:absolute;
height:1px;
width:1px;
background:red;
top:0;
left:0;
}
By this way :
div {
position: relative;
border:1px solid green;
height:200px;
background-color:yellow;
}
div span {
position: absolute;
top: 0;
left: 0;
height: 1px;
width: 1px;
background: red;
}
http://jsfiddle.net/m3GMc/1/
Or via an image.
You should be able to use:
first-pixel-color-top-left-color: #f00;
Related
I want to create a div with border-radius 50% and having blue background such that right side part of curve should be filled with another color say light blue. How do we do that using css pseudo elements
#circle{
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
}
You can use the following solution:
#circle{
width: 50px;
height: 50px;
background: blue;
border-radius: 50%;
position:relative;
}
#circle:after {
content:"";
display:block;
position:absolute;
left:50%;
top:0;
height:100%;
width:50%;
background:lightblue;
z-index:-1;
}
<div id="circle"></div>
I have built a sample with two arrows. Basically the arrows are built with standard boxes - one with a h2 one with a p
<header>
<h2 class="maintitle">Test</h2>
<p class="subtitle">Test about a test</p>
</header>
each box has two pseudo elements :before and :after. One creates a rectangle the other extends the box towards the page border to get a borderless arrow. The used css looks like that.
html,
body {
overflow-x:hidden;
}
.wrap {
width: 50em;
margin: 0 auto;
}
section {
margin-top:6em;
width:100%;
background-color: green;
height:30em;
}
.maintitle,
.subtitle {
height: 3.5rem;
line-height: 3.5rem;
position:relative;
}
.maintitle {
background-color: orange;
padding-left:1rem;
top: -1.77rem;
text-align: left;
&:before {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
right:100%;
background-color: orange;
}
&:after {
content: "";
position:absolute;
top:0;
bottom:0;
width:999em;
left:100%;
}
}
.subtitle {
text-align: left;
left:0;
top:-1.77rem;
padding-left: 3rem;
background-color: grey;
&:before {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
right:100%;
}
&:after {
content: "";
position:absolute;
top:0;
bottom:0;
width: 999em;
left:100%;
background-color: grey;
}
}
#media(min-width: 800px) {
.maintitle {
text-align: right;
padding-right:1rem;
&:after {
right:-1.75rem;
width:0;
height:0;
background:transparent;
border-top: 1.8rem solid transparent;
border-left: 1.8rem solid orange;
border-bottom: 1.8rem solid transparent;
}
}
.subtitle {
top: 0;
left:1.75rem;
padding-left: 1rem;
&:before {
left:-1.75rem;
width:0;
height:0;
background:transparent;
border-top: 1.77rem solid transparent;
border-right: 1.77rem solid grey;
border-bottom: 1.77rem solid transparent;
}
}
}
A pen showing an output is here
Problem is the pseudo element of the grey arrow on the right is ignoring the overflow-x:hidden statement in e.g. safari (in chrome it works). if you click with the mouse and drag it to the right you get something like that:
if i remove the pseudo element on the right and just enlarge the width of the grey box extensively it respects the overflow-x:hidden like shown in the following pen. Is there a way to get it work properly with the .subtitle:after version too?
I'm trying to make my footer stick to the bottom of the page but somehow it just can't do. I've looked in the internet for answers with no luck, so I decided to give it a shot in here.
http://jsfiddle.net/f54eq3w8/
html:
<div id="container">test</div>
<footer></footer>
css:
html{
height:100%;
position:relative;
min-height:100%;
}
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:relative;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
JSFiddle - DEMO
Use an extra div inside container to push the footer with the same height as footer's height and apply bottom margin the negative value of the footer's height to container.
HTML:
<div id="container">
<div class="footer-push">
</div>
</div>
<footer></footer>
CSS:
html, body {
background-color: #00FF00;
height: 100%;
margin: 0px;
}
#container {
z-index: 999;
background-color: #00FF00;
position: relative;
width: 1024px;
margin: 0 auto;
min-height: 100%;
margin: 0px auto -104px auto;
}
.footer-push {
position: relative;
height: 104px;
}
footer {
z-index: 99999;
position: relative;
height: 100px;
background-color: #003300;
width: 100%;
border-top:4px solid #B8B8B8;
}
change your CSS like this. Please note that besides the footer, I got rid of the html styling, which is the culprit of your issues
body{
height:100%;
padding:0;
display:inline-block;
width:100%;
min-height:100%;
}
footer{
position:absolute;
bottom:0;
background-color:#003300;
color:red;
width:100%;
height:100px;
border-top:4px solid #B8B8B8;
}
#container{
width:1024px;
margin:auto;
margin-top:60px;
min-height:100%;
}
See your updated fiddle
.box{
opacity: 0.8;
position: absolute;
top: 28px;
left: 45px;
width: 280px;
background: green
}
.box:before{
content: '';
border: 5px solid pink;
margin: 10px;
width: 300px;
}
Tried to make the box with border in the blank gap between box and border. I tried both border in box or :before but the borders are not showing outside the box along with white space.
Appreciate help.
The cleanest way to do it is to use the following CSS:
#box{
position:relative;
z-index:10;
padding:0px;
background:#fff;
border:12px solid #390;
width: 100px;
height: 100px;
}
#box:before {
content:"";
display:block;
position:absolute;
z-index:-1; top:2px;
left:2px;
right:2px;
bottom:2px;
background-color: pink
}
See the DEMO here: http://jsfiddle.net/fvHJq/1/
Depending on your needs, a simple outline might help:
.box {
width: 300px;
height: 300px;
background: #1baaaa;
border: 10px solid #fff;
outline: 5px solid #ff7474;
}
Fiddle
I have a div that needs to be centered horizontally inside another div. The problem is that the inner div is almost centered - i.e., it is centered but with a left margin/padding (I can't determine which) of about 5-10px. How can I make the inner div centered within the outer div?
HTML:
<div class="outer">
<div class="inner">
// stuff
</div>
</div>
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
}
you could do something like this:
#parent {
display: table-cell;
width: 300px;
height: 300px;
vertical-align: middle;
text-align: center;
border: 1px solid black;
}
#child {
display: inline-block;
width:100px;
height: 100px;
border: 1px solid black;
}
here's a fiddle: http://jsfiddle.net/De36Y/
I would try to make the inner div have a position: absolute, then set margin equally like the following:
CSS:
.outer {
position:relative;
display:inline-block;
width:100%;
}
.inner {
position: absolute;
margin-left: auto;
margin-right: auto
width:200px;
height:200px;
}
On .inner use:
width: 50%;
margin: 0 auto;
You could do this
.outer {
position:relative;
display:inline-block;
width:100%;
text-align: center;
}
.inner {
position:relative;
display: inline-block;
padding:10px;
width:200px;
height:200px;
}
How about this code?
.inner {
position:relative;
padding:10px;
width:200px;
height:200px;
/* included */
left:50%;
margin-left:-100px;}