As illustrated here:
http://jsbin.com/vavuvo/2
HTML
<div class="color-bar">
<span></span><span></span><span></span>
</div>
LESS
.color-bar {
display: block;
height: 5px;
border: 1px solid red;
> span {
display: inline-block;
height: 5px;
width: 25%;
}
> span:nth-child(1) {
background: blue;
}
> span:nth-child(2) {
background: green;
}
> span:nth-child(3) {
background: purple;
}
> span:nth-child(4) {
background: orange;
}
}
The default value for vertical-align is baseline. just set it to top instead.
http://jsfiddle.net/06z63n7L/
.color-bar > span {
display: inline-block;
height: 5px;
width: 25%;
vertical-align: top;
}
Related
Sandbox link: https://codesandbox.io/s/charming-hermann-pcpcsy?file=/src/styles.module.css
I want to create multi sector element using css. I need 4 segments as shown below:
<div className={classes.loader}>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
<section className={classes.loader_sector}></section>
</div>
and here's my CSS:
.loader_sector {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
}
.loader_sector:nth-child(1) {
border-top-color: #fff;
}
.loader_sector:nth-child(2) {
border-left-color: #fff;
}
.loader_sector:nth-child(3) {
border-right-color: #fff;
}
.loader_sector:nth-child(4) {
border-bottom-color: #fff;
}
but this keeps all this circles stick together:
I want some gap at junction of every sector. Can someone help me achieve the same?
Edit one:
As suggested in comments using margin-top left and right solves the problem, but the core issue still remains, when I rotate them, they start contracting: https://codesandbox.io/s/charming-hermann-pcpcsy?file=/src/styles.module.css
Here you go, you can play with border radius and gap between sections to make it pretty.
.Spinner {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: purple;
display: flex;
align-items: center;
justify-content: center;
}
.loader > * {
box-sizing: border-box;
}
.loader {
color: red;
position: relative;
height: 10rem;
width: 10rem;
text-align: center;
vertical-align: center;
animation: rotate 2s ease-in-out infinite;
}
.loader_sector {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
mix-blend-mode: overlay;
pointer-events: none;
}
.loader_sector:nth-child(1) {
border-top-color: pink;
margin-top: -5px;
}
.loader_sector:nth-child(2) {
border-left-color: blue;
margin-left: -5px;
}
.loader_sector:nth-child(3) {
border-right-color: green;
margin-left: 5px;
}
.loader_sector:nth-child(4) {
border-bottom-color: yellow;
margin-top: 5px;
}
#keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div class=Spinner>
<div class=loader>
<section class=loader_sector></section>
<section class=loader_sector></section>
<section class=loader_sector></section>
<section class=loader_sector></section>
</div>
</div>
Replace this css code in your css file, it will work.
.Spinner {
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.loader > * {
box-sizing: border-box;
}
.loader {
/* background-color: white; */
position: relative;
height: 10rem;
width: 10rem;
border-radius: 50%;
}
.loader_sector {
position: absolute;
/* background-color: blue; */
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 0.8rem solid transparent;
}
.loader_sector:nth-child(1) {
border-top-color: pink;
margin-top: -10px;
}
.loader_sector:nth-child(2) {
border-left-color: blue;
margin-left: -10px;
}
.loader_sector:nth-child(3) {
border-right-color: green;
margin-left: 10px;
}
.loader_sector:nth-child(4) {
border-bottom-color: yellow;
margin-top: 10px;
}
I am Having a lof of problems trying to create a message card for my app. Basically I want to the content of the message div to be align with the name of the person,like this app .I already Tried to change the display to flex wrap,but still not the same, And I am looking if it's possible to re-create what this person did on the image here
Right now mine is this:
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #fc0303;
border: 100px none #ffffff;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
background: #fc0303;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #191919;
border: 100px none #ffffff;
border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
background: #191919;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
#menu_icon {
width:40px;
height:40px;
border-radius:50%;
transition: transform .9s;
float:right
}
#menu_icon:hover {
cursor:pointer;
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari 3-8 */
transform: scale(1.1);
}
.chat_box{
background-color:#191919;
overflow: scroll;
overflow-x: hidden;
border: 2px black dashed;
width:100%;
height:100%;
border-radius:3px;
padding:10px;
}
.chat_box_message_content{
display:block;
}
.msg-txt {
display: flex;
flex-flow: wrap column;
width: 80%;
}
.chat_box_message_content p{
color:white;
}
.chat_box_message_content img {
width:35px;
height:35px;
border-radius:50%;
}
body {
background: #eef0f1;
color: black;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
}
<div id="chat_box" class="chat_box">
<img onclick="showMenu()" id="menu_icon" src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<p style="color:white;font-size:13px;font-style: oblique;margin-top:50px">Usuário Conectado ao servidor!</p>
<div class="chat_box_message_content">
<img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<span style="color:#9b72da" class="chat_box_message_content_icon">o</span>
<p class="chat_box_message_content_msg">
AAAAAAAAA
</p>
</div>
<div class="chat_box_message_content">
<img src="https://i.pinimg.com/736x/3f/e0/dc/3fe0dcb84367af59e8881edcb7747d58.jpg">
<span style="color:#da729f" class="chat_box_message_content_icon">Maria</span>
<p class="chat_box_message_content_msg">
teste
</p>
</div>
</div>
Can U guys help me with it?
Add display: inline to your ".chat_box_message_content p" CSS class to be like this:
.chat_box_message_content p {
color:white;
display: inline;
}
You can try to make the card div have display: grid and then set the content's positions inside the grid. Something like that:
::-webkit-scrollbar {
width: 3px;
height: 3px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #fc0303;
border: 100px none #ffffff;
border-radius: 7px;
}
::-webkit-scrollbar-thumb:hover {
background: #fc0303;
}
::-webkit-scrollbar-thumb:active {
background: #000000;
}
::-webkit-scrollbar-track {
background: #191919;
border: 100px none #ffffff;
border-radius: 100px;
}
::-webkit-scrollbar-track:hover {
background: #191919;
}
::-webkit-scrollbar-track:active {
background: #333333;
}
::-webkit-scrollbar-corner {
background: transparent;
}
#menu_icon {
width: 40px;
height: 40px;
border-radius: 50%;
transition: transform .9s;
float: right
}
#menu_icon:hover {
cursor: pointer;
-ms-transform: scale(1.1);
/* IE 9 */
-webkit-transform: scale(1.1);
/* Safari 3-8 */
transform: scale(1.1);
}
.chat_box {
background-color: #191919;
overflow: scroll;
overflow-x: hidden;
border: 2px black dashed;
width: 100%;
height: 100%;
border-radius: 3px;
padding: 10px;
}
.chat_box_message_content {
display: grid;
grid-template-columns: 50px 5fr;
grid-template-rows: 20px 30px;
margin: 2em 0;
grid-column-gap: 15px;
}
.msg-txt {
display: flex;
flex-flow: wrap column;
width: 80%;
}
.chat_box_message_content span {
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 1;
}
.chat_box_message_content p {
color: white;
grid-column-start: 2;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
padding: 5px 0;
}
.chat_box_message_content img {
width: 100%;
max-width: 45px;
height: auto;
border-radius: 50%;
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 1;
grid-row-end: 2;
}
body {
background: #eef0f1;
color: black;
font-family: "Roboto", sans-serif;
overflow-x: hidden;
}
how with the filter css property pop-up in this element to leave the background white?
need to leave the inner white when fillter , and I don't know how
now
need
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
filter: brightness(55%);
}
.first span:hover{
width: 100px;
height: 25px;
border: solid;
display: block;
}
<div class="first"> <span>alert</span></div>
<div class="first"><span>alert</span></div>
you can use this style
.first{
width: 200px;
height: 50px;
border: solid;
background: white;
}
.first span{
display: none;
background: white;
}
.first:hover{
background: #0000004f;
}
.first:hover span{
width: 100px;
height: 25px;
border: solid;
display: block;
}
Whenever you use filter, all children of that element will inherit it.
To achieve what you want you need to make it a sibling. Here is an example:
HTML:
<div class="block">
<div class="block-filter"></div>
<span class="block-message">alert</span>
</div>
CSS:
.block {
position: relative;
width: 200px;
}
.block-filter {
height: 50px;
width: 100%;
border: solid;
background: white;
}
.block-message {
display: none;
background: white;
}
.block-filter:hover {
filter: brightness(55%);
}
.block-filter:hover + span {
filter: unset;
position: absolute;
top: 0;
left: 0;
border: solid;
display: block;
pointer-events: none;
background: white;
}
https://codepen.io/diego-fortes/pen/vYBJoeP
I have some beautiful CSS:
$itemHeight: 40px;
$arrowModifier: 8;
$pageBackgroundColor: $color-gray-50;
.processBar {
display: flex;
flex-wrap: wrap;
&_item {
display: inline-block;
background: $color-gray-200;
height: $itemHeight;
position: relative;
flex-grow: 1;
text-align: center;
line-height: $itemHeight;
text-decoration: none;
color: $color-text;
padding-left: 10px;
padding-right: 10px;
&:hover {
text-decoration: none;
color: $color-text;
}
&-default {
&:hover {
background: $color-light-gray;
}
}
&-selected {
background: $color-white;
}
&:before,
&:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
&:first-child {
&:before {
left:0;
border: none;
}
}
&:not(:first-child) {
&:before {
left:0;
border-color: transparent transparent transparent $pageBackgroundColor;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
&:last-child {
&:after {
right: 0;
border: none;
}
}
&:not(:last-child) {
&:after {
right:0;
border-color: $pageBackgroundColor transparent;
border-width: $itemHeight/2 0 $itemHeight/2 $itemHeight/$arrowModifier;
}
}
}
}
Here is the HTML that uses it:
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Here is what it does:
But at a certain size the :after elements can jump down, as seen here:
I don't understand why that is happening. How can I stop it from happening?
The ::before and ::after pseudo-elements on a flex container are considered flex items.
The ::before pseudo is the first item. The ::after pseudo is the last. So you have to think of them as siblings of the other flex items.
You can try using the order property to re-arrange items to achieve the effect you want.
What CSS pre-processor is this? I used every pre-compiler on CodePen and got errors from the $variables so I removed them and filled them in with whatever. Is this Stylus? Anyways, besides the variables being removed and some color changes, the only significant change is that I changed flex-wrap:wrap to flex-wrap:nowrap.
SNIPPET
.processBar {
display: flex;
flex-wrap: nowrap;
}
.processBar_item {
display: inline-block;
background: #c8c8c8;
height: 40px;
position: relative;
flex-grow: 1;
text-align: center;
line-height: 40px;
text-decoration: none;
color: #000;
padding-left: 10px;
padding-right: 10px;
}
.processBar_item:hover {
text-decoration: none;
color: red;
}
.processBar_item-default:hover {
background: #808080;
}
.processBar_item-selected {
background: cyan;
}
.processBar_item:before,
.processBar_item:after {
display: inline-block;
content: "";
border-style: solid;
position: absolute;
}
.processBar_item:first-child:before {
left: 0;
border: none;
}
.processBar_item:not(:first-child):before {
left: 0;
border-color: red;
border-width: 20px 0 20px 5px;
}
.processBar_item:last-child:after {
right: 0;
border: none;
}
.processBar_item:not(:last-child):after {
right: 0;
border-color: tomato;
border-width: 20px 0 20px 5px;
}
<div class="processBar">
Label
Label
Label
Label
Label
Label
</div>
Having some issues trying to create a fixed header layout for this jsfiddle:
http://jsfiddle.net/4xk4D/107/
Basically, I'd like the id element app-header-container to be fixed on the page.
I used this article as a reference but no luck yet!
NOTE: I am using SCSS in the jsfiddle.
#header {
top:0;
width:100%;
position:fixed;
background-color:#FFF;
}
#content {
position:static;
margin-top:100px;
}
Trying to modify your css:
#app-header-wrapper
{
width: 1024px;
margin: 10px auto;
background-color: pink;
}
#app-header-container
{
}
#app-main-nav
{
background-color: pink;
}
#app-header
{
height: 93px;
background-color: blue;
}
#app-access
{
background-color: green;
}
#app-content-container
{
width: 1024px;
margin: 10px auto;
background-color: red;
}
#app-content
{
float: left;
width: 739px;
background-color: yellow;
}
#app-sidebar
{
float: right;
width: 275px;
background-color: orange;
}
#app-footer
{
margin: 0 auto;
width: 1024px;
height: 50px;
background-color: pink;
}
.clearfix:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
Or just try using css grid for layouting. One of them http://1kbgrid.com/
#app-header-wrapper {
width: 1024px;
margin: 10px auto;
background-color: pink;
#app-header-container {
#app-access {
background-color: green;
}
#app-header {
height: 93px;
background-color: blue;
}
#app-main-nav {
background-color: pink;
}
}
}
You can not nest CSS that way. Much of the CSS is being ignored due to how you've got it nested and sub nested between brackets. Markup shoul dbe selector { property } or selector, selector, selector { property }