I have this image and I need to reply it.
I already did most of the code, however I'm having some trouble doing the black box.
It needs to be:
- on top of "redbox"
- behind the "bluebox"
- on top of "blueinbox"
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>
Done.
body {
font: 500 16px 'Open Sans', Arial, sans-serif;
color: #fff;
}
.container {
position: relative;
max-width: 400px;
height: 200px;
margin: 2rem auto;
border: 1px solid #000;
background-color: #eee;
}
.box-red, .box-blue-light, .box-blue-dark, .box-black {
position: absolute;
}
.box-red {
top: 20px;
right: 20px;
width: 120px;
height: 120px;
border: 1px solid red;
border-radius: 5px;
}
.box-black {
top: 40px;
right: 40px;
width: 60px;
height: 60px;
background-color: #000;
}
.box-blue-light {
top: 80px;
right: 80px;
width: 80px;
height: 80px;
background-color: #05adeb;
}
.box-blue-light::before {
content: "";
position: absolute;
right: 0;
width: 20px;
height: 20px;
background-color: #000;
}
.box-blue-light h5 {
margin-top: 2rem;
font: 500 1rem 'Open Sans';
letter-spacing: 2px;
text-align: center;
}
.box-blue-dark {
top: 60px;
right: 60px;
width: 120px;
height: 120px;
border: 1px solid blue;
border-left-style: dashed;
background: #fff url("https://media1.giphy.com/media/fLg3MEWdgH5Ti/200.gif");
}
.box-blue-dark::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(170,50,90,.25)
}
<body>
<div class="container">
<div class="box-red"></div>
<div class="box-black"></div>
<div class="box-blue-dark"></div>
<div class="box-blue-light"><h5>NINJA!<h5></div>
</div>
</body>
Add z-index:1; to .bluebox.
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.container {
background-color: #e1e1e1;
height: 200px;
width: 400px;
border: 0;
margin: auto;
display: table;
margin-top: 20px;
position: relative;
}
.redbox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 20px 20px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: red;
border-radius: 5px;
position: absolute;
}
.bluebox {
background-color: #fff;
height: 120px;
width: 120px;
margin: 60px 60px 0 0;
display: table;
right: 0;
border-style: solid;
border-width: 1px;
border-color: blue;
position: absolute;
border-left-style: dashed;
}
.blueinbox {
background-color: #00aeef;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.blackbox {
background-color: #000;
height: 80px;
width: 80px;
margin: 20px 20px 0 0;
float: right;
}
.ninja {
color: #fff;
font-family: "Open Sans", Arial, sans-serif;
letter-spacing: 2px;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
<body>
<div class="container">
<div class="redbox">
<div class="blackbox"></div>
</div>
<div class="bluebox">
<div class="blueinbox">
<div class="ninja">
<p>NINJA!</p>
</div>
</div>
</div>
</div>
</body>
Related
So I am trying to do conditional rendering and i've narrowed it down to the outside parent <div> tag being the culprit. So, I removed the conditional rendering and am trying to figure out why my card styling is being altered. Below I posted screenshots with and without parent div tag.
return (
<div>
<div className="card" id="chatcard">
<div className="card-body">
<h5 className="card-title">{this.props.user.user}</h5>
<div className="card-text">
<ChatList
user={this.props.user}
socket={this.props.socket}
currentUser={this.props.currentUser}
/>
</div>
</div>
<div className="card-footer">
<small className="text-muted">
<form>
<ChatField
user={this.props.user}
socket={this.props.socket}
chatusers={this.props.index}
/>
</form>
</small>
</div>
</div>
</div>
);
CSS
.chat {
color: white;
}
.chat .dropdown-toggle:after {
content: none;
}
.userbutton {
size: 2px;
}
.card {
color: black;
}
.card-text {
overflow: auto;
height: 10rem;
}
.onlinebar {
position: "absolute";
color: red;
bottom: 0;
left: 0;
}
#chatbtn {
color: black;
width: 200px;
margin-left: 5px;
margin-top: 0px;
}
.chatcollapse {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#chatHeader {
margin: 0px;
padding: 0px;
}
#chatcard {
width: 2rem;
}
.card-deck .card {
max-width: calc(25% + 80px);
}
.card-body {
padding: 0px;
margin: 0px;
}
.bubble-r {
align-items: flex-end;
position: relative;
background: #0072c6;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
color: white;
border-radius: 6px;
}
.bubble-r:after,
.bubble-r:before {
left: 100%; /*change this from right to left*/
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble-r:after {
border-color: rgba(200, 200, 204, 0);
border-left-color: #0072c6; /*change this from right to left */
border-width: 8px;
margin-top: -3px;
}
.bubble-r:before {
border-color: rgba(200, 204, 0, 0);
border-left-color: #0072c6; /*change this from right to left*/
border-width: 8px;
margin-top: -3px;
}
.bubble {
position: relative;
background: #cad5d7;
max-width: 100px;
padding: 5px;
font-family: arial;
margin: 0 auto;
font-size: 14px;
border-radius: 6px;
}
.bubble:after,
.bubble:before {
right: 100%;
top: 42%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.bubble:after {
border-color: rgba(255, 255, 204, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
.bubble:before {
border-color: rgba(255, 204, 0, 0);
border-right-color: #cad5d7;
border-width: 8px;
margin-top: -3px;
}
#chatcard {
width: 40rem;
}
I adjusted the width within this and it worked. It's odd that adding the div tag caused this.
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}
I'm trying to get the iframe the to the full page height, but it's not really working.
I already tried many ways to do it, but none of them would work for me...
I hope some of you know how to do it!
HTML:
<body>
<article>
<h1>Hello world</h1>
<p class="subtitle fancy ">
<span>Versie 1.0</span>
</p>
</article>
<iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>
<footer>
<span class="arrow "></span>
<p>© Copyright 2015</p>
</footer>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #ECECEC;
margin: 0px;
color: #333;
font-family:'Cinzel Decorative', cursive;
}
h1 {
font-size: 3em;
text-align: center;
}
article {
max-width: 600px;
overflow: hidden;
margin: 0 auto 50px;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
text-align: center;
display: -webkit-flex;
}
.fancy:before, .fancy:after {
content:"";
border-bottom: 1px solid white;
border-top: 1px solid white;
-webkit-flex: 1;
margin: .45em 0;
}
.fancy:before {
margin-right: 15px;
}
.fancy:after {
margin-left: 15px;
}
footer {
background-color: #D7D7D7;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
font-family:'Montserrat', sans-serif;
border-top: 2px solid white;
}
footer p {
margin-left: 10px;
font-size: 15px;
color: #626262;
}
footer:before, footer:after, footer > .arrow {
content:"";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom-color: #D7D7D7;
pointer-events: none;
}
footer:after {
margin-left: -8px;
border-width: 8px;
}
footer > .arrow {
margin-left: -11px;
border-width: 11px;
border-bottom-color: #fff;
}
.configurator {
width: 100%;
background-color: white;
position: absolute;
margin-top: -50px;
margin-bottom: -1000px;
}
So what I want is the iframe height all the way to the bottom against the top of the footer.
jsFiddle: http://jsfiddle.net/94d9tbLx/
Added script to find height .
var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);
Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/
Remove all styles from footer and .configurator and add the following:
footer {
background-color: #D7D7D7;
margin-bottom: 0px;
width: 100%;
height: 50px;
left: 0px;
font-family: "Montserrat",sans-serif;
border-top: 2px solid #FFF;
bottom: 0px;
position: relative;
float: left;
}
.configurator {
width: 100%;
background-color: #FFF;
height: 100vh;
float: left;
position: relative;
}
FIXED JSFIDDLE
(adjust the height to anything)
I was trying to make a CSS shape like this. I need to make exact the shape shown in the attached image. How to make this?
Please help.
Fiddle link link
CSS
#activityIcon {
position: relative;
width: 200px;
height: 150px;
margin: 20px 0;
background: red;
border-radius: 50% / 10%;
color: white;
text-align: center;
text-indent: .1em;
}
#activityIcon:before {
content: '';
position: absolute;
top: 10%;
bottom: 10%;
right: -5%;
left: -5%;
background: inherit;
border-radius: 5% / 50%;
}
Try this :
UPDATE...
MARKUP:
<div id="activityIcon">
<div class=concaveTop></div>
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#757575;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after{
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #757575;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #757575;
right: -18px;
}
.concaveTop:before, .concaveTop:after{
content: '';
position: absolute;
width: 34px;
height: 32px;
}
.concaveTop{
position: absolute;
top: 0;
width: 314px;
height: 28px;
left: -50px;
overflow: hidden;
box-shadow: 0 -4px 0 #757575;
}
.concaveTop:before{
left: 1px;
box-shadow: 20px -24px 0 3px #757575;
border-radius: 50%;
}
.concaveTop:after{
right: 15px;
box-shadow: -18px -24px 0 3px #757575;
border-radius: 50%;
z-index: 1;
}
DEMO
MARKUP:
<div id="activityIcon">
▴
</div>
STYLE:
#activityIcon {
position: relative;
width: 200px;
height: 100px;
background:#333;
border-radius: 0 0 30px 30px;
margin:40px auto;
color: #ccc;
font-size: 6em;
text-align: center;
line-height: 100px;
}
#activityIcon:before,#activityIcon:after {
content: '';
position: absolute;
width:0;
height:0;
}
#activityIcon:before{
border-left: 20px solid transparent;
border-top: 81px solid #333;
left: -18px;
}
#activityIcon:after {
border-right: 20px solid transparent;
border-top: 81px solid #333;
right: -18px;
}
I'm not sure if my answer provides anything that kougiland's doesn't, but I did it so I figured I might as well post it.
It looks like this.
Here's the codepen.
The HTML looks like this.
<div class="tab-bar">
<div class="tab">▴</div>
<div class="tab">▴</div>
<div class="tab">▴</div>
</div>
The CSS looks like this.
body {
background-color: #eee;
}
.tab-bar {
overflow: hidden;
text-align: center;
}
.tab {
margin: 0 1.55rem;
color: #999;
display: inline-block;
position: relative;
top: 0.1rem;
width: 9rem;
font-size: 3rem;
line-height: 3rem;
background-color: #666;
transform: perspective(4rem) rotateX(-20deg);
border-radius: 0 0 1rem 1rem;
}
.tab::before,
.tab::after {
content: " ";
display: block;
position: absolute;
width: 1rem;
height: 1rem;
top: -1rem;
border-color: #666;
border-style: solid;
}
.tab::before {
left: -1rem;
border-radius: 0 2rem 0 0;
border-width: 1rem 1rem 0 0;
}
.tab::after {
right: -1rem;
border-radius: 2rem 0 0 0;
border-width: 1rem 0 0 1rem;
}
I can't figure out how to get the [X] button into the top right corner of my custom css box.
Here's the result so far:
#wrapper {
height: 100px;
width: 500px;
}
#wrapper {
bottom: 50%;
right: 50%;
position: absolute;
}
#container {
background: #FFF;
left: 50%;
padding: 10px;
top: 50%;
margin: 0;
padding: 0;
height: 100%;
border: 1px solid rgb(128, 128, 128);
height: 100%;
position: relative;
}
#inner1 {
height: 100%;
border: 1px solid blue;
}
#inner2 {
height: 100%;
border: 1px solid green;
}
#titlebar {
cursor: pointer;
height: 23px;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#0A246A, endColorStr=#A6CAF0, GradientType=1);
color: white;
font: 13px arial, helvetica;
}
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
}
<div id="wrapper">
<div id="container">
<div id="titlebar">Information Box</div>
<div><input id="button" type="button" value="X"></div>
</div>
</div>
Just add position:absolute; top:0; right:0; to the CSS for your button.
#button {
line-height: 12px;
width: 18px;
font-size: 8pt;
font-family: tahoma;
margin-top: 1px;
margin-right: 2px;
position:absolute;
top:0;
right:0;
}
jsFiddle example