I tried to implement this CSS code:
.camera_caption {
left: 0;
margin-top: 263px;
padding-left: 365px;
display: inline-block;
position: relative;
width: 717px;
/*padding: 10px 20% 10px 10px;*/
padding: 0px 10% 10px 20%;
color: white;
text-decoration: none;
overflow: hidden;
font: normal 14px/24px 'Roboto';
color: #fff;
right: -119px;
}
.camera_caption:before,
.camera_caption:after {
position: absolute;
content: '';
height: 50%;
width: 100%;
left: -15%;
z-index: -1;
/*background: #164185;*/
background-color: rgba(22, 65, 133, 0.9);
}
.camera_caption:before {
top: 0px;
transform: skew(45deg);
}
.camera_caption:after {
bottom: 0px;
transform: skew(-45deg);
}
But I get transparent line here
Can you give me some advice how I can remove this transparent line? For example how I can add new code for fix?
Try:
.camera_caption::before, .camera_caption::after {
height: 50.04%;
}
Try using media queries.
#media only screen and (max-width: 1182px) {
/* Write new positioning css for elements here */
}
Looks like you have problem below 1183px width.
Take it as a break point and rewrite positioning CSS.
Related
I have the following css file
body {
font-family: Baskerville;
background: #ecf0f1;
color: #2c3e50;
}
h1 {
margin: 16px 0;
padding-left: 16px;
border-left: 5px solid #e74c3c;
font-family: Baskerville;
font-size: 48px;
}
h3 {
margin: 16px 0;
padding-left: 16px;
color: #cccac4;
}
.container1 {
padding: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.container1 .checkbox {
padding: 8px 48px;
margin: 8px;
font-family: Baskerville;
font-size: 25px;
}
input[type="checkbox"]{
display: none;
}
label {
position: relative;
}
label::before {
content: "";
background: url("check-circle.svg");
background-position: center;
background-size: contain;
width: 32px;
height: 32px;
position: absolute;
left: -44px;
top: -8px;
transform: scale(0) rotateZ(180deg);
transition: all 0.4s cubic-bezier(0.54, 0.01, 0, 1.49);
}
input[type="checkbox"]:checked + label::before {
transform: scale(1.0) rotateZ(0deg);
}
label::after {
content: "";
border: 2px solid #27ae60;
width: 24px;
height: 24px;
position: absolute;
left: -42px;
top: 1px;
border-radius: 50%;
}
This is a simple transform and transition where i rotate the img (check-circle.svg) in those 4 curve points of cubic-bezier , whenever it is checked or unchecked after. However the transition and transformation wont work. It will simply not show. Where am i mistaken ?
Are you sure you've placed <label>...</label> immediately after <input type="checkbox"/>? Code seems fine, although I'm not sure what is the purpose of input[type="checkbox"]{ display: none; }. Posting html would be nice too.
Also you can check if provided svg's url is correct. Try to replace it with some other svg url found on internet.
make sure that (label) is a direct next child of (input)
so i have the following design for some "button tabs".
One side is curved, so border radius would not really be possible.
But is this type of curve even possible ?
or am i doomed to use some sort of image?
mostly looking for tips on how this might be accomplished, or somewhere i can look for a solution, since my previous tries to find a solution has yet to yield a result.
Html
<div class="tab-row">
<button>All Products<div class="tab-row__counter">20</div></button>
<button>Hardware<div class="tab-row__counter">20</div></button>
<button>Virtual<div class="tab-row__counter">20</div></button>
<button>Bundles<div class="tab-row__counter">20</div></button>
</div>
Css
.tab-row{
button{
background-color:$element-bg;
border:0;
color:$white;
width:300px;
height:90px;
margin-right:20px;
margin-top:40px;
border-radius: 5px 100px 0 0;
&:first-child{
margin-left:40px;
}
.tab-row__counter{
}
}
}
This is what i ended up with as a result,
https://codepen.io/andrelange91/pen/YzPqJXO
not exactly curved but close enough
You can try the curves by using the border-radius, transform, and transform-origin properties like,
/**
* Slanted tabs with CSS 3D transforms
* See http://lea.verou.me/2013/10/slanted-tabs-with-css-3d-transforms/
*/
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1.5em 2em 1em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -7px;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: .5em; left: 0;
z-index: -1;
border-radius: 10px 10px 0 0;
background: #434f78;
box-shadow: 0 2px hsla(0,0%,100%,.5) inset;
transform: perspective(5px) rotateX(2deg);
transform-origin: bottom left;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
You can use radial gradient also,
body { padding: 50px;background:#20273d }
nav {
position: relative;
z-index: 1;
white-space: nowrap;
}
nav a {
position: relative;
display: inline-block;
padding: 1em 5em 1.2em 1em;
color:#9a9a9a;
text-decoration: none;
margin: 0 -20px;
border: 0px none;
}
nav a::before {
content: ''; /* To generate the box */
position: absolute;
top: 0;
right: 0;
bottom: .5em;
left: 0;
z-index: -1;
background: radial-gradient(circle at top right,transparent 5.8vw, #434f78 6.8vw);
transform: perspective(10px) rotateX(1deg);
transform-origin: bottom left;
border: 0px none;
}
nav a.selected {
z-index: 2;
color:#FFF;
}
<nav class="left">
All Products
Hardware
Virtual
</nav>
Whilst this does not replicate the exact shape you're after, this does provide an example of the method I described in the comments in how to approach it. You will just need to edit the values in ::before and ::after to get it to your desired shape.
.curve {
background: blue;
width: 50px;
height: 75px;
position: relative;
}
.curve:before {
content: '';
background-image: radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 100px, blue 100px);
position: absolute;
top: 0;
left: 100%;
width: 100px;
height: 75px;
}
.curve:after {
content: '';
position: absolute;
width: 50px;
height: 75px;
background: blue;
border-radius: 0 0 100% 0 / 0 0 100% 0;
top: 100%;
left: 0;
}
.container {
display: flex;
align-items: flex-start;
justify-content: center;
}
.tab {
height: 150px;
width: 300px;
background: red
}
<div class="container">
<div class="tab"></div>
<div class="curve"></div>
</div>
Also take a look at Creating s-shaped curve using css
I am having some issues with absolute objects on a website. Z-index essentially won't work correctly. I may be being a little dumb?
Here is the website: http://www.mascots.ds-demo.co.uk/
The blue and yellow characters need to be behind the hero cta buttons 'learn more' and 'get a quote' however i cant get them to work with z-index.
CSS on characters:
.character-blue-float {
position: absolute;
float: right;
top: 7%;
left: -20%;
z-index: 1000;
-ms-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
transform: rotate(7deg);
}
.character-blue-float img {
width: auto;
max-width: 800px;
height: auto;
}
CSS on Buttons:
.home-hero-cta {
margin-top: 30px;
z-index: 2000;
}
.btn-outer-lrg {
padding: 10px 20px;
color: #08788c;
border: 2px solid #08788c;
border-radius: 5px;
font-size: 22px;
background-color: transparent;
margin-right: 10px;
font-family: 'Fredoka One', cursive;
}
apply below css to hero-home and check
.hero-home {
z-index: 1001;
position: relative;
}
it should work
I have some code which is meant to render a curved boundary from a vertical to the bottom right as shown in the attached picture:
But as you can see, the text is not in the right spot... granted, it's 10 pixels from the main vertical right wall of the main part of the DIV, but the padding from the top is not 7px. I've tried rendering the "padding" using line-height, but what you see here is at line-height: 0... going any lower doesn't make it go any higher... Increasing it however, does push it further down.
Is there any I can render this code such that "ELBOW 1" appears 7px from the top of the DIV, and yet still retain the text content within the tag as a data attribute?
JSFiddle: https://jsfiddle.net/eliseo_d/b83d9ytL/3/
Code below:
HTML:
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>
CSS:
html {
background-color: rgb(0,0,0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102,102,102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0,0,0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 30px;
left: 104px;
bottom: 0;
position: absolute;
margin-right: 4px;
}
div[class^='elbow-'][class*='-wide0-']:before {
width: 21px;
}
div[class^='elbow-'][class$='-grey1']:before {
background-color: rgb(102,102,102);
}
/* inside curve */
div[class^='elbow-'][class*='-botrt-']:after {
height: 21px;
width: 73px;
bottom: 30px;
left: 21px;
padding-right: 31px;
position: absolute;
content: attr(data-text);
text-indent:-59px;
color: rgb(0,0,0);
text-align: right;
}
div[class^='elbow-1-'][class*='-botrt-']:after {
line-height: 0;
}
div[class^='elbow-'][class*='-botrt-'][class$='-grey1']:after {
background: radial-gradient(circle at 100% 0%, rgba(102,102,102,0) 21px, rgba(102,102,102,1) 21px);
}
Update: For some reason the Impact font isn't rendering correctly in the Fiddle... This won't be an issue in my original local code, but the padding issue from above still stands...
Yep, here we go.
html {
background-color: rgb(0, 0, 0);
font-family: Impact;
}
body {
margin: 5px;
}
div[class$='-grey1'] {
background-color: rgb(102, 102, 102);
}
div[class^='elbow-'] {
/* default settings */
color: rgb(0, 0, 0);
font-size: 14pt;
height: 67px;
margin-bottom: 4px;
margin-right: 21px;
text-transform: uppercase;
width: 104px;
position: relative;
}
div[class^='elbow-1-'] {
padding-top: 46px;
}
div[class^='elbow-'][class*='-botrt-'] {
border-bottom-left-radius: 42px;
}
/* elbow bar & inner curve */
div[class^='elbow-'][class*='-botrt-']:before {
content: '';
height: 52px;
width: 21px;
left: 100%;
bottom: 0;
position: absolute;
/* inside curve */
background: radial-gradient(circle at top right, transparent, transparent 21px, rgb(102, 102, 102) 21px);
}
/* text content */
div[class^='elbow-'][class*='-botrt-']:after {
top: 10px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
position: absolute;
content: attr(data-text);
color: rgb(0, 0, 0);
}
<div class="elbow-1-botrt-wide0-grey1" data-text="elbow 1"></div>
Please try this code sample sample pen
body {
background: #000;
}
.elbow {
background: rgb(102,102,102);
color: red;
width: 150px;
height: 100px;
padding: 10px 20px;
border-bottom-left-radius: 50px;
position: relative;
}
.elbow:before {
content: '';
width: 40px;
height: 75px;
background: #000;
position: absolute;
right: 0;
top: 0;
border-bottom-left-radius: 25px;
}
<div class="elbow">
ELBOW 1
</div>
I'm trying to get a trapezoidal perspective shape to have the whole area be clickable. I've gotten it to work in Firefox and even IE, but Chrome isn't cooperating too well.
Here's a fiddle with the shape and a link: http://jsfiddle.net/9n9uh6f6/1/
As you can tell, the link doesn't become active until you hover over the 'area' part of the text. In other browsers, the whole height of the shape is clickable.
I read that Chrome renders a perspective image differently and perhaps that's why it's not doing what it's supposed to.
Here's my CSS:
.prodcaptions {
width:136px;
height: 85px;
position:relative;
left:10%;
text-transform:uppercase;
text-align:center;
letter-spacing: 1.6px;
color: #000;
}
.prodcaptions:before {
content:"";
position:absolute;
border-radius:1px;
box-shadow:0 0 0 3px #27628e;
top:-5%;
bottom:-11%;
left:-1%;
right:-5%;
-webkit-transform:perspective(40em) rotateX(-45deg);
transform:perspective(40em) rotateX(-45deg);
}
.prodcaptions a {
z-index:999;
position:relative;
height: 85px;
display: block;
padding-top: 25px;
}
Please have look at this code:
.prodcaptions {
position: relative;
height: 150px;
width: 150px;
margin: 50px;
padding: 10px;
perspective: 150px;
perspective-origin: 50% 0;
}
a{
padding: 50px;
position: absolute;
border: 1px solid black;
transform: rotateX(-15deg);
}
Seems to work the way you want it. fiddle
Try this shape for link trapazoid shape - jsFiddle
Advantage - you can change skew property to change angle of shape! Easy and effective! Reverse value for reverse shape!
html
Click Here!
css
a {
display: block;
z-index: 1;
position: relative;
/* custom sizes */
width: 136px;
height: 85px;
/* demo-only decoration */
margin: 100px auto;
font: 16px/50px Arial, sans-serif;
text-transform: uppercase;
text-align: center;
background-color: orange;
}
a:before, a:after {
content:'';
position: absolute;
top: 0;
left: 0;
width: 100%;
bottom: 0;
z-index: -1;
/* demo-only decoration */
border-radius: 4px;
background-color: orange;
}
a:before {
transform: skew(-20deg);
left: 25px;
}
a:after {
transform: skew(20deg);
right: 25px;
left: auto;
}