Related
at first I thought it was easy, until I tried...
is there some god of css can help me lol
but there is a premise, use css only and one html tag, no special character like ★
I finished the outside, But I got one tsudo content only, how to set two stars and one word into that or optimize that(not a real button, just look like it will be fine, thaaaaaaaaaaanks for any help or any thought)
i post what I did so far, and sorry for described it unclearly, It look like a button, not a lol.
#foo::after {
content: "";
position: absolute;
height: 31px;
width: 101px;
border: 1px solid rgb(90, 90, 90);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 8px;
box-shadow: 1px 1px 1px lightgrey;
}
#foo::before {
content: "";
color: rgb(78, 78, 78);
font-weight: bold;
font-size: 10px;
position: absolute;
height: 24px;
width: 93px;
border: 1px solid rgb(161, 161, 161);
/* box-shadow: 1px 1px rgb(134, 134, 134); */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 6px;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
}
#foo {
position: relative;
height: 30px;
width: 100px;
border: 1px solid white;
border-radius: 8px;
background: rgb(209, 206, 206);
}
<div id="foo"></div>
Use before or after pseudo selector to add text. Use CSS Entities or HTML Symbols to add stars.
Use multiple box-shadows to add multiple border styles
body {
padding: 25px;
}
#foo:before {
content: "★ CHECKOUT ★";
}
#foo {
display: inline-block;
position: relative;
padding: 15px 20px;
border-radius: 8px;
font-weight:bold;
font-family:sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>
Here is my idea where I build the start using background (https://dev.to/afif/background-pattern-star-shape-194m)
body {
padding: 25px;
}
#foo:before {
content: "CHECKOUT";
display:block;
padding:20px 50px;
--s: 40px; /* size */
--m: 113px; /* space */
--v1:transparent,#fff 0.5deg 108deg,transparent 109deg;
--v2:transparent,#888888 0.5deg 36deg,transparent 37deg;
background:
conic-gradient(from 54deg at calc(var(--s)*0.68) calc(var(--s)*0.57),var(--v1)),
conic-gradient(from 126deg at calc(var(--s)*0.5) calc(var(--s)*0.7) ,var(--v1)),
conic-gradient(from 162deg at calc(var(--s)*0.5) 0 ,var(--v2)),
conic-gradient(from 90deg at calc(var(--s)*0.02) calc(var(--s)*0.35),var(--v2));
background-size: calc(var(--s) + var(--m)) calc(var(--s) + var(--m));
mix-blend-mode: darken;
background-position: 0 9px;
}
#foo {
display: inline-block;
position:relative;
padding: 5px 10px;
border-radius: 8px;
font-weight: bold;
font-family: sans-serif;
background: linear-gradient(rgb(230, 228, 228) 53%, rgb(199, 199, 199) 55%);
box-shadow: 0 1px 2px 2px #0000001a, 0 0 0 8px #cbcbcb, 0 0 0 10px white, 0 0 0 12px #7d7d7d;
}
<div id="foo"></div>
In my project we needed to style the checkbox element. I have seen that a common aproach is to style the :before element of the associated label instead.
So far I have managed to implement most of it, but I am having an issue with the :before element pushing the first line of the label text to the right.
I am trying to align all the text in the label to the right of the :before element, but so far the second line always starts at the same place than the :before element.
I am not a frontend dev, but I have tried changing padding, margin, left, position, etc. But I am at a loss.
This is how it looks:
I want all the text of the label ot start at the red line.
You can see what I have so far in this Fiddle.
.container-box{
display:block;
max-width:200px;
}
.neat-checkbox {
display: inline;
width:40px;
}
.neat-checkbox input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1;
font-size: 10px !important;
display: none;
}
.neat-checkbox label {
margin-left: 0px;
margin-top: 2px;
line-height: 17px !important;
}
.neat-checkbox label:before {
font-family: "FontAwesome";
content: "\f00c";
color: white;
position: relative;
left: -5px;
top: 0px;
outline: none;
cursor: pointer;
display: inline-block;
width: 17px;
height: 17px;
border: 1px solid #ced4da;
border-radius: 3px;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
box-sizing: border-box;
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type=checkbox]:checked + label:before {
background-color: #2bb19e;
border-color: #2bb19e;
color: #fff;
font-family: "FontAwesome";
content: "\f00c";
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type="checkbox"]:focus + label::before {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="neat-checkbox">
<input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
<label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>
</div>
Give the label some left padding and position the :before element absolutely within it. EG:
.container-box {
display: block;
max-width: 200px;
}
.neat-checkbox {
display: inline;
width: 40px;
}
.neat-checkbox input[type=checkbox] {
position: absolute;
top: 0;
left: 0;
margin-left: 0;
cursor: pointer;
opacity: 0;
z-index: 1;
font-size: 10px !important;
display: none;
}
.neat-checkbox label {
margin-left: 0px;
margin-top: 2px;
line-height: 17px !important;
display: inline-block; /* make it block-level */
position: relative; /* so that child elements can be positioned relative to it */
padding-left: 25px; /* allow some space for the pseudo checkbox */
}
.neat-checkbox label:before {
font-family: "FontAwesome";
content: "\f00c";
color: white;
left: 0px;
top: 0px;
outline: none;
cursor: pointer;
display: block; /* make it block-level */
position: absolute; /* give an absolute position (defaults to 0,0) */
width: 17px;
height: 17px;
border: 1px solid #ced4da;
border-radius: 3px;
background-color: #fff;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
box-sizing: border-box;
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type=checkbox]:checked+label:before {
background-color: #2bb19e;
border-color: #2bb19e;
color: #fff;
font-family: "FontAwesome";
content: "\f00c";
font-size: 11px;
padding-left: 2px;
line-height: 17px;
}
.neat-checkbox input[type="checkbox"]:focus+label::before {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
<div class="container-box">
<div>
<label>Some other stuff</label>
</div>
<div class="neat-checkbox">
<input type="checkbox" class="checkbox-list" id="checkboxId_25600" name="name_25600" value="25600">
<label for="checkboxId_25600">Label For Checkbox MOre more more</label>
</div>
</div>
The problem is that you are moving the checkbox using position relative, so the original space is preserved but you just move the visual 5px to the left.
You can add a margin-right: -5px if you use left: -5px or remove the left property and just use margin-left: -5px instead.
I have a button and I need it to be lightning on hover
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
&:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: -4px -4px 4px rgba(250, 0, 20, 0.4);
But it has only a shadow in front of the button. How do a shadow all over the button?
in chrome dev tools you can edit box-shadow property using visual editor,
it's quite useful and you can build whatever shadow you'd like.
for current case don't forget to toggle :hover element state
and here's your code
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 20px 20px;
display: inline-block;
cursor: pointer;
transition: background-color .4s;
}
.button:hover {
color: white;
background: gray;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<a class='button'>Hello</a>
<style>
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
}
</style>
<html>
<button type="button" class="button">Click Me!</button>
</html>
Try
-webkit-box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
-moz-box-shadow:0 0 5px 2px rgba(250, 0, 20, 0.4);
box-shadow: 0 0 5px 2px rgba(250, 0, 20, 0.4);
.button {
font-size: 16px;
position: relative;
top: 20%;
background: #fcffdc;
color: #de204f;
border: none;
border-radius: 3px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
padding: 20px 20px 14px 20px;
}
.button:hover {
background: #fcffdc;
cursor: pointer;
box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
}
<button class="button">click here</button>
Use box-shadow css as box-shadow: 0 0 20px rgba(250, 0, 20, 0.4);
I know there are many posts on centralizing a drop down menu. However, after trying all the various solutions, it seems that I'm still missing something. I got the code of a dropdownmenu from some free website as follows:
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
background: #000080; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3090C7', endColorstr='#000080'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#3090C7), to(#000080)); /* for webkit browsers */
background: -moz-linear-gradient(top, #3090C7, #000080); /* for firefox 3.6+ */
border: solid 1px #6d6d6d;
}
#nav li
{
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top, #ebebeb, #a1a1a1); /* for firefox 3.6+ */
color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top, #04acec, #0186ba) !important; /* for firefox 3.6+ */
color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top, #fff, #cfcfcf); /* for firefox 3.6+ */
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
margin-left: 15%;
margin-top: 20px;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}
I tried to embed the menu with div having style of using margin-left and margin-right as auto but it still could not work probably due to the use of float:left.
Sorry if it this question seems repeated. I'm still new to CSS so I hope some kind soul can help me out here! Thanks!
Try:
#nav {
margin: 0;
}
#menu {
text-align: center;
}
Your updated fiddle.
not sure what the desired effect is, but using your #menu style, you can move that nav wherever you want:
#menu {
width:600px;
height:50px;
background-color:red;
padding-left:10px;
}
I just did a background color so you can see where your nav is in relation to the div. Post any other HTML you have so I can make changes if this isn't what you want.
I'm trying add hover, active state to custom back button. custom data-theme is "app-ios" Here is the
`
<div data-role="page" id="main">
<div data-theme="c" data-role="header">
<h3>
Header
</h3>
<a data-role="button" data-rel="back" data-icon="arrow-l" data-theme="app-ios">Back</a>
</div>
<div data-role="content"></div
</div>
`
CSS
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669; /* Old browsers */
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
/* button background and borders color */
a[data-theme="app-ios"] {
border: none;
}
a[data-theme="app-ios"] .ui-btn-corner-all {
border: 1px solid rgba(0,0,0, 0.4);
-webkit-border-radius: 5px;
background: #ba2669;
-webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25), inset 0 1px 1px rgba(0,0,0, 0.2);
overflow: visible;
padding-left: 8px !important;
padding-right: 8px !important;
}
/* shadows and label color */
a[data-theme="app-ios"].ui-shadow,
a[data-theme="app-ios"] {
box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none;
background-clip: none; -webkit-background-clip: none; -moz-background-clip: none;
color: white;
font-weight: bold;
font-size: 12px!important;
text-transform: uppercase;
top: 5px;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0, 0.4);
width: 51px;
}
/* make room for the point */
a[data-theme="app-ios"].ui-btn-left {
left: 14px;
}
a[data-theme="app-ios"].ui-btn-left .ui-btn-corner-all {
padding-left: 5px !important;
}
/* position the DIV that contains the point */
a[data-theme="app-ios"] .ios-tip {
float: left;
left: -10px;
top: 6px;
position: absolute;
-webkit-transform: scale(.7, 1.0);
}
/* apply gradient */
a[data-theme="app-ios"] .ios-tip span {
display: block;
width: 19px;
height: 18px;
border: 2px solid rgba(0,0,0, 0.4);
border-right: 0;
border-top: 0;
/* the gradient color mus be slightly different since the point is within the body of the button */
background: #ba2669; /* Old browsers */
border-radius: 1px; -webkit-border-radius: 1px; -moz-border-radius: 1px;
/*box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -webkit-box-shadow: 0 1px 0 rgba(255,255,255, 0.25); -moz-box-shadow: 0 1px 0 rgba(255,255,255, 0.25);*/
-webkit-transform: rotate(45deg) scale(.9, .9);
}