Just wrote some newbie css kind of code. I don't know how to fit the image inside the border! I want to fit the water icon inside the circular border! Please run the snippet below
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png');
background-color: #e4ffe0;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Use content image as a background...it will be easy for you to control the size of image
Stack Snippet
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: "";
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') center/20px no-repeat
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Why not put it in as a background?
.notice {
position: relative;
margin: 1em;
background: #f3fff2;
padding: 1em 1em 1em 2em;
border-left: 4px solid #DDD;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);
}
.notice:before {
position: absolute;
top: 50%;
margin-top: -17px;
left: -17px;
background-color: #DDD;
color: #FFF;
width: 40px;
height: 40px;
border-radius: 100%;
text-align: center;
line-height: 30px;
font-weight: bold;
font-family: Georgia;
text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}
.info {
border-color: #e4ffe0;
}
.info:before {
content: '';
display: inline-block;
background: #e4ffe0 url('http://www.free-icons-download.net/images/water-droplet-icon-72075.png') no-repeat center/contain;
}
<div class="notice info">
<p>This is a an info notice, it provides feedback of a neutral nature to the user.</p>
</div>
Related
Need to make lines opposite to each other, now the lines are under each other. Tried a lot of methods but nothing work, please help! Really stuck with that. See the code below and a picture that shows the desired result, idk what to do. Tried to add margin; top; bottom; padding, these methods didn't do anything.
Here's the CSS and HTML:
.crypto-card{
width: 250px;
height: 230px;
background: white;
-webkit-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
-moz-box-shadow: 0px 3px 8px 0px rgba(194,192,194,1);
box-shadow: 0px 3px 2px 0px rgba(240,240,240,1);
border-radius: 6px;
transition: .3s;
margin-left: 15px;
margin-right: 25px;
margin-bottom: 20px;
border: 1px solid rgb(245, 245, 245);
}
.crypto-card:hover{
transform: translateY(-1px);
-webkit-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
-moz-box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
box-shadow: 0px 3px 6px 2px rgba(240,240,240,1);
}
.crypto-card .body{
width: 100%;
border-top: 1px solid rgb(240, 240, 240);
padding: 10px;
}
.crypto-card .logo-sprite{
width: 29px;
height: 29px;
margin: 10px;
}
.crypto-symbol{
border-left: 1px solid rgb(220, 220, 220);
padding-left: 10px;
font-size: 1.3rem;
/* font-family: 'Loto', sans-serif; */
letter-spacing: 5px;
text-transform: uppercase;
/* color: #3c3c3c; */
font-weight: 500;
color: rgb(70, 70, 70);
padding-bottom: 4px;
position: relative;
top: 4px;
}
.crypto-card .price-label{
width: 100%;
text-align: left;
color: rgb(190, 190, 190);
font-weight: 500;
font-size: .8rem;
}
.crypto-card .price{
font-size: 1.5rem;
font-weight: 100;
right: -60px;
top: 4px;
text-align: right;
}
<div class="d-flex justify-content-left" style="margin-top: 10px; padding-left: 5%; padding-right: 5%;">
<div class="row" style="">
<div class="crypto-card">
<span>
<img src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png" class="logo-sprite" width="16" height="16" alt="Bitcoin">
<span class="crypto-symbol">BTC</span>
</span>
<div class="body">
<span class="price">$3865.58</span>
<div class="price-label"><span class="title">Price</span></div>
<span class="volume">$67,585,868,137</span>
</div>
</div>
But I need it similar to this
Using a display: grid would make this super easy.
Here's and example:
* {
box-sizing: border-box;
}
.container {
width: 500px;
margin: auto;
padding: 20px;
}
.card {
display: grid;
grid-template-columns: 50px auto;
grid-template-rows: 50px 200px;
border: 1px solid #eee;
border-radius: 5px;
}
.card .image {
display: block;
align-self: stretch;
justify-self: stretch;
padding: 5px;
border: 1px solid #eee;
border-top: 0;
border-left: 0;
}
.card .header {
padding: 10px;
border-bottom: 1px solid #eee;
}
.card .side {
border-right: 1px solid #eee;
white-space: nowrap;
display: flex;
align-items: center;
}
.card .side .text {
rotate: -90deg;
translate:-12px 0;
}
.card .content {
padding: 10px;
}
<div class="card">
<img
src="https://s2.coinmarketcap.com/static/img/coins/64x64/1.png"
class="image"
alt="Bitcoin"
/>
<div class="header">BTC is a scam</div>
<div class="side">
<div class="text">BIG SCAM</div>
</div>
<div class="content">content in here</div>
</div>
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
I'm having some issues with my code.
I added this button to my HTML page and CSS with the styling of the button class and the hover effect:
.buton4e {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
cursor: pointer;
font-size: 16px;
}
.buton4e:hover {
background-color: #383f95;
border: none;
border-radius: 8px;
color: white;
padding: 7px 16px;
text-align: center;
text-decoration: none;
display: inline-block;
font-weight: bold;
font-size: 16px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 40px 0 rgba(0, 0, 0, 0.19);
}
.intro-header {
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
color: #f8f8f8;
background: url(../img/background.jpg) no-repeat center center;
background-size: cover;
}
.intro-message {
position: relative;
padding-top: 20%;
padding-bottom: 20%;
}
.intro-message>h1 {
margin: 0;
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
font-size: 5em;
}
.intro-divider {
width: 400px;
border-top: 1px solid #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.intro-message>h3 {
text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.6);
}
<!-- Header -->
<header class="intro-header">
<div class="container">
<div class="intro-message">
<br /><br /><br />
<h3>90% of IT companies believe they need to partner to grow.<br /> Join <b>Channeliser</b> - the global network for building IT partnerships.</h3>
<hr class="intro-divider">
<button class="buton4e">JOIN FOR FREE</button>
</div>
</div>
</header>
The problem is that the effect works when I hover the button but there when the button is static it has no styling
*EDIT:
Sorry for not posting all the code.
This should be sufficient for the things I'm trying to modify.
Thanks in advance.
.styledButton {
font-family: Arial;
width: 100px;
height: 50px;
color: black;
background-color: grey;
border: 0;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.styledButton:hover {
color: white;
background-color: black;
}
.styledButton:active {
opacity: 0.5;
}
<button class = "styledButton">Click Me!</button>
This should help. Any click animations I have trouble with.
Hopefully somebody can help me with my issue.
I'm trying to make my own website, but when I try to move one of the three individual boxes(see picture), all three of them move. three boxes issue
[The same issue also happens with the social icons box but I'm less concerned with that section]
I'm hoping someone can take a look at the code and hopefully tell me where I've gone wrong.
My Website Files
You have put position:block in your css. There is no position:block in css. You have to use display property to that. I have change your box div's css to display: inline-block; and made few changes in width too.(using calc).
#import url('https://fonts.googleapis.com/css?family=Roboto|Roboto+Condensed|Source+Sans+Pro');
#import url('https://fonts.googleapis.com/css?family=Poppins');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url(../css/images/background/backgroundimage.jpg);
}
/* HEADERBAR */
div#headerbar {
width: 100%;
height: 50px;
display: inline-block;
background-color: rgba(237,87,82, 0.65);
font-family: 'Source Sans Pro', sans-serif;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.leftlogo {
float: left;
margin-top: 12px;
margin-left: 15px;
color: #fff;
text-shadow: 1px 1px 1px #000;
font-size: 20px;
font-family: 'roboto+condensed', sans-serif;
}
.leftlogo span {
font-weight: 300;
color: rgba(237, 87, 82, 0.8);
font-size: 20px;
font-family: 'roboto', sans-serif;
}
.version {
float: right;
margin-top: 14px;
margin-right: 10px;
}
/* CODE TEST */
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 21px/40px;
background-clip: padding-box;
text-align: center;
}
.button {
margin-top: 10px;
font-size: 1em;
padding: 14px;
color: #fff;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
font-family: 'Source Sans Pro', sans-serif;
}
.button:hover {
background: rgba(255, 255, 255, 0.3);
border: 3px solid #000;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #000;
border-radius: 5px;
border: 5px solid #126b72;
width: 70%;
position: relative;
transition: all 5s ease-in-out;
color: #fff;
font-family: 'Roboto Condensed', sans-serif;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
#media screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
div#updatesbox {
width: 900px;
height: 40px;
background-color: #000;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
}
.updatesbox1 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
display:inline-block;
margin-top: 5px;
margin-left: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.updatesbox2 {
width: 443px;
height: 30px;
background-color: rgba(255, 255, 255, 0.2);
float: right;
display: inline-block;
margin-top: 5px;
margin-right: 5px;
box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 2px #000000;
-webkit-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-moz-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
-o-box-shadow: inset 0px 0px 20px 0px #000000,2px 2px 20px 6px #000000;
}
.twitter {
float: left;
margin-top: 7px;
margin-left: 40px;
}
.tweet {
color: white;
}
.facebook a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.facebookicon {
margin-left: 5px;
margin-top: 7px;
}
.steam a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.steamicon {
margin-left: 5px;
margin-top: 7px;
}
.instagram a {
color: rgba(273, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
.instaicon {
margin-left: 5px;
margin-top: 7px;
}
.tweet a {
color: rgba(237, 87, 84, 1);
text-decoration: none;
font-family: 'Poppins', sans-serif;
}
/* ALTERNATING TEXT */
#tickertape{
display: block;
margin-left: 600px;
margin-right: auto;
margin-top: 14.5px;
text-align: center;
width:400px;
height:20px;
}
.tickertape {
display: block;
margin-top: 6px;
margin-left: 20px;
margin-right: auto;
color: #000;
}
#subtickertape{
position:absolute;
width:443px;
height:20px;
}
.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color: rgba(237, 87, 84, 0.6);
text-shadow: 2px 2px 2px #000;
}
.subtickertapefont a{
color:white;
text-decoration:none;
}
/* BODY CONTAINER BOX */
div#bodycontainer {
margin-top: 20px;
margin-left: auto;
margin-right: auto;
background-color: rgba(237, 87, 84, 0.3);
width: 90%;
height: 800px;
border: 2px dashed #000;
}
#bodycontainer #insidebox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 500px;
margin: 15px;
margin-top: 70px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
}
#bodycontainer #centerbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 400px;
margin: auto;
margin-top: 200px;
background: rgba(255, 255, 255, 0.2);
border: 2px dashed #000;
}
#rightbox {
display: inline-block;
float: left;
width: calc(32.3% - 7.5px);
height: 710px;
margin: auto;
margin-top: 0px;
background: rgba(237, 87, 84, 0.2);
border: 2px dashed #000;
margin-left: 15px !important;
}
change your stylesheet.css to this and then you can move each box individually. Hope this helps you.
I have a div element that will display some message indicating a point on my page.
The arrow should be displayed on the left hand side of the div instead of bottom(currently).
Here is my HTML, CSS and fiddle code.
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
left: 0%;
bottom: -20px;
border-top: 11px solid #444;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
fiddle:- https://jsfiddle.net/5t6s6p5y/
Change CSS to code like:
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
Example:
body {
font-family: Helvetica;
font-size: 13px;
}
div.callout {
height: 20px;
width: 130px;
/*float: left;*/
z-index: 1;
}
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 20px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
//margin: 25px;
min-height: 20px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.left::before {
left: 0%;
right: -20px;
top: 40%;
border-left: 10px solid #444;
}
.callout.top::before {
border-right: 11px solid #444;
bottom: 10px;
left: -20px;
}
.callout.bottom::before {
left: 45%;
top: -20px;
border-bottom: 10px solid #444;
}
.callout.right::before {
top: 40%;
border-right: 10px solid #444;
}
.callout.top-left::before {
/*left: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
.callout.top-right::before {
/*right: 7px;*/
bottom: -20px;
border-top: 10px solid #444;
}
<div class="callout top">test</div>
Also on jFiddle.
You should probably use the class right instead of top, so as to not ruin reusability.
Also, your .callout.right class is missing a left positioning.
ie
.callout.right::before {
left: -20px;
top: 40%;
border-right: 10px solid #444;
}
see: https://jsfiddle.net/5t6s6p5y/2/