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)
Related
So I am trying to put a background image and then center the text to it, but when I change the screen size the text misaligns and moves to the top.
Here's my code:
import React from "react";
import UniversalValues from "../constants.js";
export default function Body() {
return (
<div>
<div className="Container">
<img
className="ResizeImage"
src="https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max"
alt="Background not loading! X_X"
/>
<div className="TextField">
<h1 className="BGH1">WE DO IT TOGETHER</h1>
<h1 className="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
);
}
Here is my css file:
.App {
font-family: sans-serif;
text-align: center;
}
.BGH1 {
letter-spacing: 0.06em;
font-family: "Cinzel", serif;
font-size: 5rem;
position: relative;
}
.BrandPoint {
font-size: 3rem;
font-family: "Cinzel", serif;
padding-left: 3rem;
}
.Container {
position: relative;
}
.dropbtn {
background: transparent;
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
font-weight: bold;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #33393f;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderElem {
color: white;
padding-bottom: 10px;
font-size: 1.2rem;
}
.HeaderElem:hover {
transition: transform 0.5s ease;
transform: scale(0.9);
color: #3eccb5;
border: 1px solid;
border-radius: 0.2rem;
border-color: #e0dede;
}
.HeaderSeperator {
padding-left: 2rem;
}
.HeadUp {
position: fixed;
top: 0;
left: 0;
}
.ResizeImage {
height: auto;
width: 100%;
margin: 0;
padding: 0;
opacity: 0.99;
}
.TextField {
position: absolute;
bottom: 40%;
left: 35%;
color: white;
padding-left: 20px;
padding-right: 20px;
}
What I am getting vs What I wanted:
I want to pack this whole thing together and so it could just effectively change its shape according to the screen size. I have used Bootstrap but I am new to React and designing my entire website on codesandbox.io. Do let me know the best way to do so.
Thanks in advance.
I think your problem is purely HTML/CSS and not so much React. Thanks for flexbox centering content got a lot easier today.
Change your HTML like this:
<div>
<div class="Container">
<div class="imageContainer"></div>
<div class="TextField">
<h1 class="BGH1">WE DO IT TOGETHER</h1>
<h1 class="BGH1">SO LET'S CREATE</h1>
</div>
</div>
</div>
And your CSS like this:
.Container {
display: flex;
justify-content: center;
align-items: center;
background-color:blue;
position: relative;
color: white;
text-align: center;
height: 300px;
}
.imageContainer {
position: absolute;
width: 100%;
height: 100%;
opacity: 0.2;
background-image: url("https://images.unsplash.com/photo-1533139143976-30918502365b?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max");
background-position: center center;
}
Here is a fiddle test it: https://jsfiddle.net/gtqna9c1/7/
How it works
Instead of trying to center changing text by absolute positioning it is a lot easier to create conditions where the text is always centered, no matter what. The background image is now a simple background of a div that is covering your whole box.
The fiddle is simplified and coloured for clarity. Feel free to add paddings etc. as you wish.
How to make Bootstrap 4 buttons with hexagonal left & right sides, similar to below image?
Here are answers to a similar question, but copying those styles in Bootstrap 4 (with proper .btn classes) doesn't work properly:
Elongated hexagon shaped button using only one element
As said in a comment by #chriskirknielsen, please understand code first and changes the code by your need.
body {
/* JUST FOR STYLING */
background-color: #3c93af !important;
}
.custom_btn {
position: relative;
display: block;
background: transparent;
width: 300px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 20px;
text-decoration: none;
color: #ffdc01;
margin: 40px auto;
font-family: Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.custom_btn:hover {
text-decoration: none;
}
.custom_btn:before,
.custom_btn:after {
position: absolute;
content: '';
width: 300px;
left: 0px;
height: 34px;
z-index: -1;
box-sizing: content-box;
}
.custom_btn:before {
transform: perspective(15px) rotateX(3deg);
}
.custom_btn:after {
top: 40px;
transform: perspective(15px) rotateX(-3deg);
}
.custom_btn.custom_btn--border:before,
.custom_btn.custom_btn--border:after {
border: 4px solid #ffdc01;
}
.custom_btn.custom_btn--border:before {
border-bottom: none;
}
.custom_btn.custom_btn--border:after {
border-top: none;
}
.custom_btn.custom_btn--border:hover:before,
.custom_btn.custom_btn--border:hover:after {
background: #ffdc01;
}
.custom_btn.custom_btn--border:hover {
color: #fff;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
Click me!
I have a checkbox that I have styled accordingly. Like this :
input[type=checkbox] {
transform: scale(1.3);
}
input[type=checkbox] {
width: 30px;
height: 30px;
margin-right: 15px;
cursor: pointer;
font-size: 17px;
visibility: hidden;
}
input[type=checkbox]:after {
content: " ";
background-color: rgba(224, 214, 214, 0.877);
display: inline-block;
margin-left: 10px;
padding-bottom: 5px;
color: #fff;
width: 22px;
height: 25px;
visibility: visible;
border: 1px solid transparent;
padding-left: 3px;
border-radius: 5px;
}
input[type=checkbox]:checked:after {
content: "\2714";
padding: -5px;
background: red;
font-weight: bold;
}
<input type="checkbox" [(ngModel)]="Option1" />
<p>Option1</p>
I tested this and it worked in Chrome and Opera, but I forgot to check Firefox.
Now I see that the checkboxes don't appear there at all.
I understand it is an issue of using :after for checkbox, but how do I fix this ?
So that the same checkbox appears styled on the browsers?.
I am uncertain of what to do so that I keep the design.
Thank you.
Read these specifications
:before and :after should only work on the element which can act as a
container of content. cannot contain any content so it should
not support those pseudo-elements. Chrome supports because it does not
follow the spec
However you can use <span> tag next to input tag to achieve this like below. It will work on firefox as well
body {
font: 13px Verdana;
}
label {
position: relative;
display: inline-block;
text-align: center;
}
label span {
display: block;
margin-top: 10px;
cursor: pointer;
}
input[type=checkbox] {
width: 30px;
height: 30px;
cursor: pointer;
margin: 0;
opacity: 0;
}
input[type=checkbox]+span:after {
content: "";
background-color: rgba(224, 214, 214, 0.877);
color: #fff;
width: 30px;
height: 30px;
border-radius: 5px;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
line-height: 30px;
}
input[type=checkbox]:checked+span:after {
content: "\2714";
background: red;
}
<label>
<input type="checkbox" [(ngModel)]="Option1" />
<span>Option1</span>
</label>
I have a small issue, I need to rotate 2 spans and create a perfect 'X'.
I've created a JSfiddle for this. Can you guys help me?
I can't seem to get my head around how much should i transform origin...
HTML
<div class="toggle-btn">
<span></span>
<span></span>
</div>
SASS
.toggle-btn {
width: 38px;
height: 19px;
cursor: pointer;
position: relative;
margin-top: 18px;
text-align: center;
&:after {
content: '';
display: block;
clear: both;
}
span {
height: 2px;
margin: 5px 0px;
background: #333;
width: 100%;
display: block;
transition: .15s ease-in;
text-align: center;
&.toggled {
&:nth-of-type(1) {
transform: rotate(-45deg);
transform-origin: 22px 9px;
}
&:nth-of-type(2) {
transform: rotate(45deg);
transform-origin: 20px -5px;
}
}
}
}
and JS
$('.toggle-btn').on('click',function(){
$(this).find('span').toggleClass('toggled');
});
This appears to work. I had to adjust the margin to 4px. The rotation needs to come after the x/y translation because translating after the rotation appears to change the point of origin on which the element is rotating instead of origin of the element. You can observe this behavior by trying a large (100px) x-translation after the rotation.
.toggle-btn {
width: 38px;
height: 19px;
cursor: pointer;
position: relative;
margin-top: 18px;
text-align: center;
overflow: show;
&:after {
content: '';
display: block;
clear: both;
}
span {
height: 2px;
margin: 4px 0px;
background: #333;
width: 38px;
display: block;
transition: .15s ease-in;
text-align: center;
&.toggled {
&:nth-of-type(1) {
transform: translate(0px, 3px) rotate(-45deg);
}
&:nth-of-type(2) {
transform: translate(0px, -3px) rotate(45deg);
}
}
}
}
I'm not new to CSS but for some reason I've not played with animations or transitions up to this point. I want to learn how to apply any form of transition to a tooltip that I've made, but every time I read code and then try I seem to fail. I have a quick example of code I put together and maybe someone can quickly show me what I'm doing wrong.
Note: This is only an example, I don't plan to use a 2 second transition, makes it clear that it's working.
Following is the key code, please see the jsfiddle here.
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:hover:after {
transition: all 2s ease-in-out;
.borderRadius(3px);
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
}
&:after {
display: none;
}
&:hover:after {
display: block;
}
}
Try this solution
you should assign all the styles to the after
and to the hover status just the attribute you want to animate
label[data-tooltip] {
border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
padding-bottom: 2px;
position: relative;
cursor: pointer;
&:after {
transition: all ease 5s;
content: attr(data-tooltip);
background: rgba(83, 83, 83, 0.95);
text-transform: none;
position: absolute;
line-height: 18px;
padding: 5px 10px;
font-size: 13px;
width: 100px;
z-index: 99;
color: #fff;
bottom: 120%;
left: -5px;
opacity: 0;
}
&:hover:after {
opacity: 1;
}
}
.formRow {
background: #EFEFEF;
margin: 50px auto;
padding: 10px;
width: 50%;
}
.formRow-label {
display: inline-block;
margin-right: 20px;
}
.formRow-input {
display: inline-block;
}