I am attempting to select different pseudo classes to change their color I have the following codepen
This are my elements:
<figure class="atom">
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
<div class="electron"></div>
</figure>
CSS
body{
background:#c3c2c2;
}
.atom-container{
display: flex;
justify-content: center;
align-items: center;
}
.electron{
border-radius:50%;
width:100%;
height:100%;
position:absolute;
top:0;
border:7px solid #D35353;
}
.electron:nth-child(2){
transform:rotate(72deg);
border:7px solid #D9DD92;
}
.electron:nth-child(3){
transform:rotate(-72deg);
border:7px solid #EFBDEB;
}
.electron:nth-child(4){
transform:rotate(-144deg);
border:7px solid #FF9A6A;
}
.electron:nth-child(5){
transform:rotate(144deg);
border:7px solid #93B7E6;
}
.electron:after{
content:"";
position:absolute;
border-radius:50%;
width:2px;
height:2px;
border:4px solid #EFBDEB;
background:#EFBDEB;
animation:rotate 1.90s linear infinite;
}
::selection{background:#000;color:#bbb;}
figure{
width:75px;
height:255px;
position:fixed;
top: 20%;
left: 40%;
transform:scale(1.2,1.2)
}
#keyframes rotate{
0%{bottom:-15px;left:20px;}
18%{bottom:60px;left:-15px;}
50%{bottom:210px;left:-5px;}
60%{bottom:245px;left:25px;}
70%{bottom:195px;left:55px;}
76%{bottom:150px;left:65px;}
90%{bottom:50px;left:55px;}
97%{bottom:-5px;left:40px;}
99%{bottom:-10px;left:25px;}
100%{bottom:-15px;left:20px;}
}
This question is solved in my already working codepen:
https://codepen.io/marcos-collado-segura/pen/wLPzPW
everything is there but I cannot color the electrons
I have tried : nth-child() of this 'afters'
I have to achieve this with pure CSS I am not using precompilers
its solved with this
.atom nth-child(1):after
(for example)
Related
I'm creating a transition that flips a contact card (link) but the backface-visibility property is giving me problems.
As can be seen in the codepen, nothing disappears after being flipped (even though it has turned its "backface" to the screen).
I tried creating a child div inside the card, to inherit its size and tried flipping it from the start so that, when the card were to be flipped, that div would have been on its front side and covered the rest.
The backface-visibility, though, doesn't work on that child div:
.cardBack{
padding:20px 50px;
background-color:white;
position:absolute;
width:inherit;
height:inherit;
backface-visibility:hidden;
transform:rotateX(180deg);
z-index:101;
}
If I either remove the transform:rotateX or the backface-visibility property, the .cardBack div covers the rest of the content both when the card is flipped and unflipped.
If I remove them both, it does the exact opposite of what I want: the .cardBack div obscures the content when the card is not flipped, and becomes invisible when the card is flipped.
If I leave it like this, the .cardBack div is never visible.
Here's the updated code.
Chrome has a weird bug when rotating elements, so backface-visibility was needed after all, just not on the .card itself.
$(document).ready(function(){
$(".card").click(function(){
$(this).toggleClass("turned");
$(this).toggleClass("unturned");
});
});
body{
background-color:#5AEDBC;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
overflow:hidden;
}
.card:after{
box-sizing:border-box;
backface-visibility:hidden;
display:block;
content:'';
width:200px;
height:400px;
left:380px;
position:absolute;
background: cadetblue;
transform:rotateZ(-40deg);
backface-visibility:hidden;
}
.card{
padding:20px 50px;
overflow:hidden;
position:absolute;
width:350px;
height:120px;
display: flex;
justify-content: center;
align-items:center;
flex-direction: row;
background-color:white;
font-family:'Raleway', sans-serif;
border:5px solid rgba(0,100,100, 0.75);
color:#008A45;
margin-top:100px;
transition:all 1s ease;
transform-origin:0 100%;
transform-style: preserve-3d;
}
.cardBack {
width:100%;
height:100%;
position:absolute;
top: 0;
left: 0;
background-color:white;
z-index:101;
}
.card.unturned .cardBack{
opacity: 0;
transition: opacity 0.25s ease 0.25s;
}
.card.turned .cardBack{
opacity: 1;
transition: opacity 0s ease 0.15s;
}
/* this is needed for chrome */
.card > * {
backface-visibility: hidden;
}
/* */
.card.turned{
transition:all 1s cubic-bezier(.17,.67,.59,1.35);
transform:rotateX(-180deg);
}
.info{
display: flex;
justify-content: center;
flex-direction: column;
text-align:right;
backface-visibility:hidden;
}
.title{
font-size:26px;
font-weight:bold italic;
color:black;
padding:5px 0;
display:block;
}
.desc{
font-size:18px;
color:#ccc;
padding:5px 0;
display:block;
}
.img{
border-radius: 50%;
width: 90px;
height: 90px;
margin-left:20px;
backface-visibility:hidden;
z-index:100;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"/>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 1</span><span class="desc">Description of the interesting person 1</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 2</span><span class="desc">Description of the interesting person 2</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
<div class="card unturned">
<div class="cardBack"></div>
<div class="info"><span class="title">Interesting person 3</span><span class="desc">Description of the interesting person 3</span></div><img src="http://www.cavaros.com/site_media/img/icon-profile.png" class="img"/>
</div>
View on Codepen.io
I need to make a layout in CSS, somewhat like this.
Green & red are 2 squares on left and right corners respectively. How do I make Yellow region occupy all the space in between, and also align the text in ('Login', in the screenshot) as centered.
Also I tried couple of things with Twitter-Bootstrap too. col-md-1, pull-left etc. didn't quite achieve what I intended. Any help is appreciated.
Here is my working code (without any Bootstrap)
<head>
<style>
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
float:left;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
float:right;
}
#labelText{
height:40px;
float:left;
width:100%-80px;
background-color: #f3ff11;
}
</style>
</head>
<body>
<div id="myContainer">
<span id="leftLogo"></span>
<center>
<span id="labelText"><H2>Login</H2>></span>
</center>
<span id="rightLogo"></span>
</div>
You can use display:table and display:table-cell to achieve this.
First fix your markup:
<div id="myContainer">
<span id="leftLogo"></span>
<span id="labelText"><h2>Login</h2></span>
<span id="rightLogo"></span>
</div>
Then your CSS:
div, span, h2 {
margin:0;
padding:0;
}
#myContainer {
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
display:table;
}
#leftLogo, #rightLogo, #labelText {
display:table-cell;
height:40px;
}
#leftLogo, #rightLogo {
width:40px;
}
#leftLogo {
background-color: green;
}
#rightLogo {
background-color: red;
}
#labelText {
text-align:center;
background-color: #f3ff11;
}
Demo: http://jsfiddle.net/TjGC3/
You can use position:absolute; to position your colored squares inside a wrapper with position:relative and width:100%;
FIDDLE
HTML:
<div id="myContainer">
<div id="labelText">
<span id="leftLogo"></span>
<H2>Login</H2>
<span id="rightLogo"></span>
</div>
</div>
CSS:
#myContainer{
background-color: silver;
overflow: hidden;
height: 50px;
width:100%;
}
#leftLogo{
width:40px;
height:40px;
background-color: green;
position:absolute;
top:0;
left:0;
}
#rightLogo{
width:40px;
height:40px;
background-color: red;
position:absolute;
top:0;
right:0;
}
#labelText{
height:40px;
width:100%;
background-color: #f3ff11;
position:relative;
text-align:center;
}
h2{
line-height:40px;
margin:0;
padding:0;
}
How can I achieve this view with CSS:
------------------TITLE
or
TITLE------------------
I have
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
And my styles are:
#titleLine {
border-top: 1px solid black;
width: 84%;
clear: both;
height: 20px;
}
#title {
height: 10px;
float: right;
}
My approach is here: jsFiddle
However the line width is defined with percents and I need it adjust automatically with CSS.
This may be what you are after: http://jsfiddle.net/XpSWX/1/
Hope this helps
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:left;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: right;
}
http://jsfiddle.net/sY2SV/1
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:right;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: left;
}
http://jsfiddle.net/sY2SV/2
Here is a solution:
#titleBlock {
width:100%;
}
#titleLine {
background:black;
position:absolute;
z-index:1;
left:0px;
top:14px;
width:100%;
height: 1px;
}
#title {
display:inline-block;
padding:4px;
background:white;
position:relative;
z-index:2;
/* Only variable to change... Just say left and it woulb be title------- */
float:right;
}
DEMO
Hey now you can used this
HTML
<div class="hello"><span>Hello i m sony</span></div>
Css
.hello{
background:green;
text-align:left;
position:relative;
}
.hello span{
padding-right:10px;
background:green;
display:inline-block;
position:relative;
z-index:1
}
.hello:after{
content:'';
border-top:solid 5px red;
position:absolute;
right:0;
left:0;
top:7px
}
Live demo
http://tinkerbin.com/1guJzKcI
Check my answer in Horizontal Line in Background using Css3
You can do it with a 1% gradient like this
.datedAside {
background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
background: #FFF;
padding: 0 0.5rem;
}
You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.
For text, it's best to use text-align
I have two divs one inside another, i would like to overlap one div with other and also use css idnex, but ie doesn't let me do this, is there some kind of workaround?
Please view this code in IE since it works in other browsers.
Here is jsfiddle: http://jsfiddle.net/xkDCX/1/
And the code:
<div class="container">
<div class="button"></div>
<div>
body{
margin:50px;
}
.container{
position:relative;
width:410px;
height: 300px;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index:22;
}
.button{
width:20px;
height:20px;
border:2px solid black;
position:absolute;
right:-10px;
top:-10px;
background:black;
z-index:11;
}
The thing here is that the filter you added doesnt work at all only in IE so when you see the style in other browsers they dont recognize it at all.
UPDATE:
Would this worked out for you?
<div class="container">
<div class="button">
<div class="but"></div>
</div>
<div class="background"></div>
<div>
<style>
body{
margin:50px;
}
.container{
position:fixed;
width:410px;
height:300px;
margin:0;
padding:0;
}
.container .background{
position:fixed;
bottom:0px;
left:0px;
width:100%;
height:100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#daf5fd', endColorstr='#0dbcf5');
z-index: 50;
}
.container .button{
position:absolute;
width:410px;
margin-left:auto;
margin-right: auto;
z-index: 100;
}
.container .but{
position:absolute;
width:20px;
height:20px;
background:black;
right:-10px;
top:-10px;
border:2px solid black;
}
</style>
jsFiddle:
How do I make div2 + Button2 fill the rest of the window width if I use pixel metric on column 1 and 3?
I'll use that to format a form making a textbox to change the size as two other fields are fixed.
Thank you.
CSS
td { border:solid 1px #000; float:left; }
#div1 { width:100px; border:solid 1px #000; float:left; }
#div2 { border:solid 1px #000; float:left; }
#div3 { width:100px; border:solid 1px #000; float:right; }
#Button1 { width:100% }
#Button2 { width:100% }
#Button3 { width:100% }
HTML
<div id="div1">
<button id="Button1">Button 1</button>
</div>
<div id="div2">
<button id="Button2">Button 2</button>
</div>
<div id="div3">
<button id="Button3">Button 3</button>
</div>
Another solution is moving the second DIV to the bottom and applying margins on it without float: http://jsfiddle.net/xC7uZ/6/
As far as I know, there are only two ways of doing this:
Using tables - most people do not like this idea. I for one, think it's fine for overall layout as long as you don't go overboard with nested tables and stuff. Kalle's answer covers this option
Using absolute positioning specifying all four corners. I only recently discovered this method and it works beautifully. It works in all major browsers.
Something like this:
#div1 { position:absolute; left: 0px; width: 100px; border:solid 1px #000; }
#div2 { position:absolute; left: 100px; right: 100px; border:solid 1px #000; }
#div3 { position:absolute; right: 0px; width:100px; border:solid 1px #000; float:right; }
Here is one to make you guys think :)
<div class="maincontainer">
<div class="column01">
<div class="restraint">
<p>Left column</p>
</div>
</div>
<div class="column03">
<div class="restraint">
<p>Right column</p>
</div>
</div>
<div class="column02">
<div class="restraint">
<p>Middle column</p>
</div>
</div>
</div>
and the CSS:
.maincontainer {
position:relative;
overflow:hidden;
}
.maincontainer .column01 {
float:left;
}
.maincontainer .column01 .restraint,.maincontainer .column03 .restraint {
width:200px;
}
.maincontainer .column03 {
float:right;
}
.maincontainer .column02 {
overflow:hidden;
}
.maincontainer .column02 .restraint {
width:100%;
}
* html .maincontainer .column02 {
display:inline-block;
}
I will get hammered for using <table>, but this is the most flexible and crossbrowser method. It works in ie5 ^^
http://jsfiddle.net/hobobne/24urb/
En este ejemplo vemos como poner tres columnas, de las cuales, dos tienen tamaño fijo.
Three columns and one column with 100% and two columns with fixed width.
jsfiddle
CSS
div, span, label, li, ul
{
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.cabecera
{
top:0px;
left:0px;
width:100%;
height: 100px;
display: table;
position: absolute;
border:1px solid orange;
}
.row
{
width:100%;
display: table-row;
}
.column_izq
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_izq .icono
{
width: 100%;
text-align: center;
border:1px solid red;
}
.column_center
{
width: 100%;
min-width:60px;
text-align:center;
display: table-cell;
vertical-align: middle;
border:1px solid black;
}
.column_der
{
width:60px;
height:100%;
display: table-cell;
white-space: nowrap;
vertical-align: middle;
border:1px solid black;
}
.column_der .logo
{
width: 100%;
text-align: center;
border:1px solid red;
}