https://codepen.io/danielworton/pen/ZZLEMO
Hello, I'm trying to re-create the button in the codepen linked above and I have an issue adding the stars without changing the script. Also the different colored double border ~ If anyone has any clue to a solution it would be very welcome!
#My solution is as follows:
a {
border: solid 3px #212121;
border-radius: 12px;
background-image: linear-gradient(0deg,#D3D3D3 0%,#D3D3D3 50%,#e8e8e8 51%);
color: #212121;
padding: 20px;
text-align: center;
text-decoration:none;
text-transform: uppercase;
font-family: "Lucida Console", Courier, monospace;
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
}
You can use pseudo elements to add more elements:
a {
border: solid 2px #555;
border-radius: 12px;
background-image: linear-gradient(0deg, #D3D3D3 0%, #D3D3D3 50%, #e8e8e8 51%);
color: #555;
padding: 20px 20px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-family: "Arial";
font-size: 18px;
width: 180px;
height: 14px;
display: inline-block;
margin: auto;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-shadow: 1px 1px 1px white;
font-weight: 600;
box-shadow: 0 0 0 6px #D3D3D3, 0 0 0 8px #555;
}
a:after, a:before {
content: '★';
position: absolute;
width: 100%;
left: 0;
top: 0;
display: flex;
align-items: center;
height: 100%;
padding: 0 20px;
box-sizing: border-box;
font-size: 24px;
line-height: 24px;
}
a:before {
justify-content: flex-end;
}
<a href="#">
Checkout
</a>
Although, the amount of borders on that button is kind of ridiculous to expect from one element I think.
Edit: you can add multiple borders with boxshadows
I am working on this project :
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
float: right;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>
The main content of the page has been inserted in a div named #w. I have applied margin: 0 auto; to #w for it to be centered but it is not working correctly. The margin-left is always bigger than the right side, whenever I try to reduce the margin-left, I end up having something else.
Please let me know How I can fix this problem.
Remove
#content {
width: 100%;
}
Or add
#content {
box-sizing: border-box;
}
By default, the width does not include the padding. So the outer width is bigger.
Try this :
add box-sizing property in #content
#content{
box-sizing: border-box; // ADD this
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
This is because your #userphoto is overlapping you <h1> check this out with position:absolute on #userphoto.
body {
background: #f0f0f0;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
outline: none;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #313131;
font-size: 62.5%;
line-height: 1;
}
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
h2 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.1em;
line-height: 1.4em;
letter-spacing: normal;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
p {
display: block;
font-size: 1.4em;
line-height: 1.55em;
margin-bottom: 22px;
color: #555;
}
a { color: #5a9352; text-decoration: none; }
a:hover { text-decoration: underline; }
.center { display: block; text-align: center; }
/** page structure **/
#w {
width: 90%;
margin: 0 auto;
padding-top: 30px;
padding-bottom: 45px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
#userphoto {
display: block;
position: absolute;
right: 0;
margin-left: 10px;
margin-bottom: 8px;
}
#userphoto img {
display: block;
background: #fff;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.4);
box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/** profile nav links **/
#profiletabs {
display: block;
margin-bottom: 4px;
height: 50px;
}
#profiletabs ul { list-style: none; display: block; width: 70%; height: 50px; padding-left: 0;}
#profiletabls ul li { float: left; }
#profiletabs ul li a {
display: block;
float: left;
padding: 8px 11px;
font-size: 1.2em;
font-weight: bold;
background: #eae8db;
color: #666;
margin-right: 7px;
border: 1px solid #fff;
-webkit-border-radius: 5px;
-webkit-border-bottom-left-radius: 0;
-moz-border-radius: 5px;
-moz-border-radius-bottomleft: 0;
border-radius: 5px;
border-bottom-left-radius: 0;
}
#profiletabs ul li a:hover {
text-decoration: none;
background: #dad7c2;
color: #565656;
}
#profiletabs ul li a.sel {
background: #fff;
border-color: #d1cdb5;
}
/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
<div id="w">
<div id="content" class="clearfix">
<div id="userphoto"><img src="images/avatar.png" alt="default avatar"></div>
<h1>Minimal User Profile Layout</h1>
<nav id="profiletabs">
<ul class="clearfix">
<li>Projects</li>
<!--<li>Activity</li>
<li>Friends</li>-->
<li>Profile Details</li>
<li>Orders</li>
<li>Add an article</li>
</ul>
</nav>
</div>
</div>
I want a text-area with black background to be within DIV with white background. Text-area should not fill the complete DIV so the DIV's white color is still seen around text-area. DIV itself should occupy only 80% of the screen's width (or browser's tab). The problem is that the DIV's white background ain't seen around text-area.
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: white;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
float: left;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
You can use display:inline-block; instead of float:left;
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
Jsfiddle
.mydiv {
vertical-align: middle;
width: 80%;
text-align: left;
padding-top: 10px;
padding-left: 20px;
padding-right: 20px;
background: red;
}
.mytextarea {
height: 100px;
width: 100%;
position: relative;
padding: 2px 2px;
font-size: 12px;
font-weight: bold;
display: inline-block;
border-radius: 10px;
font-family: 'Helvetica', cursive;
color: white;
text-decoration: none;
background-color: black;
border-bottom: 4px solid #2980B9;
border: 2px solid blue;
outline: 0;
}
<div class="mydiv">
<textarea class="mytextarea"></textarea>
</div>
I made have made my first CSS class, but I have got a little problem, the buttons are centered, but thats not what I want.
View: http://prntscr.com/6i30xg
I would like them so they start at the left side only. But when using float: left;to the .body class it will results in
View: http://prntscr.com/6i327q
But I would like that the buttons are on the edge like the homepage.
#import url(http://fonts.googleapis.com/css?family=Muli:300,400,300italic,400italic);
/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6
{
margin-top: 0;
margin-bottom: 2rem;
font-weight: 300;
}
h1
{
font-size: 4.0rem;
line-height: 1.2;
letter-spacing: -.1rem;
}
h2
{
font-size: 3.6rem;
line-height: 1.25;
letter-spacing: -.1rem;
}
h3
{
font-size: 3.0rem;
line-height: 1.3;
letter-spacing: -.1rem;
}
h4
{
font-size: 2.4rem;
line-height: 1.35;
letter-spacing: -.08rem;
}
h5
{
font-size: 1.8rem;
line-height: 1.5;
letter-spacing: -.05rem;
}
h6
{
font-size: 1.5rem;
line-height: 1.6;
letter-spacing: 0;
}
p
{
margin-top: 0;
}
/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.btn
{
display: inline-block;
height: 38px;
padding: 0 30px;
color: #555;
text-align: center;
font-size: 11px;
font-weight: 600;
line-height: 38px;
letter-spacing: .1rem;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border-radius: 4px;
border: 1px solid #bbb;
cursor: pointer;
box-sizing: border-box;
}
.btn
/* Form
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Programming :D
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
padding: .2rem .5rem;
margin: 0 .2rem;
font-size: 90%;
white-space: nowrap;
background: #F1F1F1;
border: 1px solid #E1E1E1;
border-radius: 4px;
}
pre > code
{
display: block;
padding: 1rem 1.5rem;
white-space: pre;
}
/* Content
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
.header
{
}
.header span
{
color: #fff;
float: left;
margin-left: 28px;
margin-top: 28px;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 24px;
}
.header ul
{
color: #fff;
float: right;
margin-right: 28px;
margin-top: 28px;
}
.header ul li
{
float: right;
border: 1px solid #fff;
padding: 5px 20px;
border-radius: 11px;
margin-right: 12px;
}
.header ul li a
{
color: #fff;
font-family: 'Muli', sans-serif;
font-weight: 300;
font-size: 11px;
text-decoration: none;
}
.body
{
padding-top: 148px;
}
.footer
{
}
Just remove margin-left: auto; and margin-right:auto; from your content class. OR You can replace auto with any fixed number of pixels like 10px. Setting the margins left and right to auto makes the content to align center of the page. So do not use auto.
You content class should look like,
.content
{
border-width: 20px 20px 0px 20px;
border-radius: 28px 28px 0 0;
box-sizing: border-box;
margin-top: 120px;
max-width: 1280px;
margin-left: <some value in pixels>;
margin-right: <some value in pixels>;
min-height: 100%;
}
Remove text-align: center; from .btn class
Working on this mobile page:
http://mockup.comule.com/ (may contain pop-ups!)
Currently only working on the mobile aspect. When in the mobile view, the yellow menu 'Hamburger' icon is shown. I copied its CSS from elsewhere. Before it was used, the word 'Menu' was in its place. I didn't remove this word - the icon replaced/covered it.
The html markup still shows the word 'Menu' as being present:
Menu
The newly-added CSS:
.handle {
background-color: #990000;
font-size: 0;
line-height: 0;text-align:right;
padding: .75rem .5rem;
display:block;
}
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
}
What I want is the menu icon to appear on the right-hand-side of the bar and the word 'Menu' to re-appear on the left.
What needs to be changed in order for this to happen?
Thanks in advance.
"Menu" written on left and menu icon on right, for this try following:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: right;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: left;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
And for "Menu" on right and icon on left, try this:
.handle:after {
content: "";
border-color: yellow;
border-style: solid none double;
border-width: 4px 0 12px;
display: block;
height: 4px;
width: 2rem;
float: left;
margin-top: -4px;
}
.handle {
background-color: #990000;
text-align: right;
padding: .75rem .5rem;
display: block;
line-height: 1.5em;
text-transform: uppercase;
font: 90%/1.3em Arial, Helvetica, sans-serif;
color: white;
font-size: 1em;
}
Also just to inform, I am not sure about the "margin-top: -4px" in ".handle:after", it would be either -4px or -18px, try it out and let me know which works.