<div id="slide1">
<span id="tf1">BUILDING YOUR HOME <br>TO BE COMFY AND WARM</span>
</div>
#tf1 {
opacity: 0.9;
line-height: 50px;
text-align: center;
display: block;
color: /*#505050*/ #505050;
text-shadow: /*#a8a8a8*/#9f9f9f -2px 1px 1px;
font-size: 41px;
font-family: Globerb;
}
#tf1::first-line {
color: /*#323232*/ #323232;
text-shadow: /*#969696*/#8c8c8c -2px 1px 1px;
font-size: 60px;
font-family: Globerb;
display: block;
}
#slide1 {
/*transform: skew(0deg, 5deg);*/
opacity: 0;
position: absolute;
padding-top: 40px;
margin-left: 19.7916%;
margin-top: 0px;
}
The problem is that in firefox, the text looks good 2 lines and thats all, but in chrome it goes into three lines. I have no idea why this is, but I guess that there is a some sort of fix via css?
<html>
<head>
<style>
#tf1 {
opacity: 0.9;
line-height: 50px;
text-align: center;
display: block;
color: /*#505050*/ #505050;
text-shadow: /*#a8a8a8*/#9f9f9f -2px 1px 1px;
font-size: 41px;
font-family: Globerb;
}
#tf1::first-line {
color: /*#323232*/ #323232;
text-shadow: /*#969696*/#8c8c8c -2px 1px 1px;
font-size: 60px;
font-family: Globerb;
display: block;
}
#slide1 {
/*transform: skew(0deg, 5deg);*/
opacity: 0;
position: absolute;
padding-top: 40px;
margin-left: 19.7916%;
margin-top: 0px;
}
</style>
</head>
<body>
<p id="tf1">BUILDING YOUR HOME <br>TO BE COMFY AND WARM</p>
</body>
</html>
chrome
firefox
ie
Related
at first im completly new to CSS and have a Question about my half working animation.
So I got an Container an this Container I wanted to slide from the Header to the normal Position but the Animation goes only the halfway and then its just starting spring without an animation to the normal Position.
Here is my CSS Code maybe you find anything I did wrong or something that I can do better to avoid those Problems.
And yeah I know my class name are not good, I just tried out CSS for the first time.
body{
font-family: 'Open Sans', sans-serif;
background-color: #f3f5f6;
padding-left: 100px;
padding-right: 100px;
}
.class-image{
width: 100%;
height: 500px;
object-fit: cover;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
border-radius: 10px 10px 0px 0px;
object-position: 30% 60%;
display: block;
}
.colorChange{
font-size: 20px;
font-weight: bold;
color: black;
}
.containerClass{
padding: 16px;
vertical-align: middle;
animation: example 2s linear;
width:85%;
position:absolute;
}
.navbar{
display: flex;
justify-content: space-between;
align-items: center;
}
a{
color: #831D17;
text-decoration: none;
margin-left: 16px;
font-weight: 700;
}
a:hover{
font-weight:bolder;
color: white;
padding-left: 8px;
padding-right: 8px;
display: inline-block;
line-height: 200%;
font-size: 16px;
border-radius: 20px;
background-color: #333333;
text-decoration: none;
}
#keyframes example {
0% {
bottom:100vH
}
100% {
bottom: 0vH
}
}
.highlight{
color: black;
font-weight: bolder;
font-size: 48px;
}
.Fotoind{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 10px 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
}
.MapsContainer{
margin-top: 16px;
width: 100%; border-radius: 10px; overflow: hidden;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
display: flex;
justify-content:space-between ;
}
.maps-right{
background-color:#333333;
color: #D6D6D6;
font-weight: 600;
border-radius: 0px 0px 0px 0px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
padding: 16px;
margin-left: 16px;
width: 30%;
}
.mapStyle{
border: 0;
height: 350px;
width: 70%;
}
.contentdown{
padding: 8px;
}
.legal{
margin-right: 16px;
}
<body>
<div class="navbar">
<h1 class="colorChange">Der Blaue Planet<br>
<span class="highlight"> Die Erde</span>
</h1>
<div>
google
Termin
Preise
Kalender
</div>
</div>
<div class="containerClass">
<img class="class-image" src="Bilder/4k.jpg">
<div class="Fotoind">
Individuelle Fotos
</div>
<div class="MapsContainer">
<iframe class="mapStyle" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2429.8384006473802!2d13.596700815695565!3d52.48206157980705!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47a849b423ae37e9%3A0x1c91decc13ce5a24!2sMechthildstra%C3%9Fe%2053%2C%2012623%20Berlin!5e0!3m2!1sde!2sde!4v1633806883383!5m2!1sde!2sde"
allowfullscreen="" loading="lazy"></iframe>
<div class="maps-right">
Ein Fast proffesionelles Seiten Layout
</div>
</div>
<div class="contentdown">
<span class="legal"> Copyright von morgen </span> | Impressum | Datenschutz
</div>
</div>
</body>
I used margin-top instead of bottom property and it works fine.
#keyframes example {
0% {
margin-top: calc(-100vh - 100%);
}
100% {
margin-top: 0vh
}
}
I added this to jsfiddle. Link
I don't even any experiencing programming, but I am trying to put together a FAQ section for our help site and I wanted to use collapsible sections for the Q&A. I made it mostly work as I wanted, however, there is one thing I can't change at all. I have looked around and could not find what is wrong with the code. Any help would be highly appreciated. I really never did this before, so a total newbie here x
The HTML code I am using is:
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</html>
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #7C5A0B;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
This is how the browsers displays it, the blue box text in Italic.
Update:
I am not sure if this is the way to post the resolution, but I finally figured it.
Under .lbl-toggle { instead of using text-transform: none !important; I used font-style: normal; !important . That did the trick! Thanks everyone!
Hello William,
Please give this code a try and let me know the outcome, buddy. I certainly hope this help you solving this issue, mate!
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none !important;
font-style: normal !important;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #e3a514;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
font-style: normal !important;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<html>
<head>
<title>No</title>
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
</head>
<body>
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</body>
</html>
I have a requirement of displaying the image/icon on top of the modal box in a semicircle. Though I have achieved it with the help of below code, but the only issue is whenever my form in the modal box goes for a validation check, displaying any error, my semicircle doesn't get adjusted accordingly, rather it stays at its position. Here, I have attached the screen shot of what exactly I am looking for and HTML/css code I have used to display the semicircle with image/icon at the top.
.modal {
font-family: Avenir-Medium;
font-size: 16px;
font-weight: 900;
font-style: normal;
font-stretch: normal;
display: block;
/*Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.3);
/* Black w/ opacity */
-webkit-animation-name: slideIn;
/* Fade in the background */
-webkit-animation-duration: 2.0s;
/* Fade in the background */
;
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 92%;
left: 14px;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 0.5s;
border-radius: 16px 16px 0px 0px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: none;
top: auto;
}
.modal-wrapper {
line-height: 45px;
border: 1px solid #e7e9ea;
border-radius: 6px 6px 0px 0px;
background-color: white;
margin: auto;
}
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border-left: 1px solid #e7e9ea;
border-top: 1px solid #e7e9ea;
border-right: 1px solid #e7e9ea;
border-bottom: 3px solid white;
bottom: 300px;
}
.close-btn {
position: absolute;
vertical-align: top;
top: 4px;
left: 320px;
width: 18px;
height: 18px;
}
.container-div-creditCard {
margin: 12px 20px 0px 20px;
}
.container-div-creditCard>img {
position: absolute;
bottom: 154px;
right: 30px;
}
.credit-card-modal-label {
font-family: AvenirHeavy;
font-size: 13px;
color: #1d3444;
text-align: center;
font-weight: 200;
height: 24px;
margin-left: 31px;
}
.input-modal {
width: 100%;
height: 44px;
}
.input-spacing {
margin-top: 15px;
}
.credit-input-modal {
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
padding: 13px 42px 12px 15px;
}
.credit-expiry-input-modal {
padding: 13px 27px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
display: inline-block;
line-height: initial;
width: 65%;
height: 44px;
}
.credit-cvc-input-modal {
width: 30%;
padding: 17px 5px 12px 10px;
border: solid 1px #e7e9ea;
border-radius: 5px;
font-family: Avenir-Book;
font-size: 14px;
font-weight: normal;
color: #8589a1;
line-height: initial;
height: 44px;
}
.cvvDisc {
-webkit-text-security: disc;
}
.credit-submit-button {
width: 100%;
padding: 13px;
margin-top: 15px;
border: solid 1px #e7e9ea;
border-radius: 5px 5px 5px 5px;
background: linear-gradient(to right, #e32490, #ed1a3d);
color: white;
margin-bottom: 20px;
font-family: Avenir-Book;
font-weight: normal;
font-size: 14px;
line-height: initial;
}
.errorMsg {
font-family: Avenir-Book;
font-weight: normal;
color: #ED1A3D;
font-size: 12px;
}
<div id="modalCCDetails" class="modal">
<div class="modal-content modal-wrapper">
<div class="container-div-creditCard">
<label class="credit-card-modal-label">ENTER YOUR CREDIT CARD DETAILS</label>
<input name="cc_name" class="input-modal credit-input-modal" type="text" placeholder="Name printed on Credit Card" onChange={this.handleUserInput} />
<span class="errorMsg"></span>
<input name="cc_number" class="input-modal credit-input-modal input-spacing" type="tel" maxLength="16" onKeyPress={(e)=> this.handleCCOnKeyPress(e)} placeholder="16 digit credit card number" />
<span class="errorMsg"></span>
<input name="cc_expDate" class="credit-expiry-input-modal" type="text" placeholder="Expiry MM-YYYY" />
<div class="device-divider" />
<input name="cc_cvc" class="credit-cvc-input-modal cvvDisc" type="tel" placeholder="CVC" maxLength="3" />
<span class="errorMsg"></span>
</div>
<button class="credit-submit-button">Submit Payment</button>
</div>
</div>
</div>
NOTE: This is a mobile view screenshot
Just adjust your css code into something like this:
.modal-wrapper::after {
background: url("../../../../images/mobile/img-payment_38.png") no-repeat 22px 10px;
background-size: 50%;
background-color: #fff;
content: '';
width: 78px;
height: 45px;
position: absolute;
left: 0;
right: 0;
margin: auto;
border-radius: 78px 78px 0 0;
border: 1px solid #e7e9ea;
border-bottom: 3px`enter code here` solid white;
top: -48px;
}
Just remove the bottom: 300px; and replace with top: -48px; or any value that you want.
please add top:-15px; and removed bottom:300px; in class .modal-wrapper::after { top: -15px; }, u will see the image move up
I have a div called title-inverse that I put a different background color behind than the container it sets in. The container is black and title-inverse has a white background color. I am wanting the white background color to stop right after the title ends.
Does anyone see what I am doing wrong?
Where the blue is in this image is where I want the black to be.
.section-wrap {
height: 80vh;
width: 100%;
position: relative;
}
.section-block {
height: 100%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
}
.sec-text {
width: 30%;
background: #000;
}
.section-content-left, .section-content-right {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.title-inverse {
background: #FFF;
color: #000;
padding: 5px 10px 2px 15px;
font-family: 'Roboto', sans-serif;
font-size: .8rem;
font-weight: 500;
line-height: 1.4em;
margin-top: 15%;
display: inline-block;
}
.section-title:after {
margin-top: 3px;
height: 2px;
width: 70px;
background: #C3C3C3;
display: block;
}
.section-description, #about-list li {
color: #777;
font-family: 'Roboto', sans-serif;
font-size: .5rem;
line-height: 1.5em;
padding-top: 30px;
}
<section class="section-wrap">
<div class="section-block right sec-img">
<div id="img2" class="back" title=""></div>
</div>
<div class="section-block sec-text left">
<h2 class="title-inverse">ALUMINUM EXTRUDED PROFILE</h2>
<div class="section-content-right" id="right-sec2">
<p class="section-description">
Our team has worked with both small start-ups to established corporations with the task of enhancing their online presence by refining
their brand to reach optimum user communication. Our ultimate goal is to improve brand awareness, while making connections with the clients' user-base.
</p>
</div>
</div>
</section>
One option that might be close to what you want is box-decoration-break, but it is an experimental feature, so support is not great (especially IE and Edge): https://caniuse.com/#feat=css-boxdecorationbreak
html,
body {
height: 100%;
margin: 0;
}
.section-wrap {
width: 600px;
position: relative;
height: 100%;
}
.section-block {
height: 100%;
display: inline-block;
vertical-align: top;
position: relative;
overflow: hidden;
}
.sec-text {
width: 30%;
background: #000;
}
.section-content-left,
.section-content-right {
width: 70%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.title-inverse {
font-family: 'Roboto', sans-serif;
font-size: .8rem;
font-weight: 500;
line-height: 1.4em;
margin-top: 15%;
}
.title-text {
background: #FFF;
color: #000;
padding: 5px 10px 2px 15px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.section-description {
color: #777;
font-family: 'Roboto', sans-serif;
font-size: .5rem;
line-height: 1.5em;
padding-top: 30px;
}
<section class="section-wrap">
<div class="section-block right sec-img">
<div id="img2" class="back" title=""></div>
</div>
<div class="section-block sec-text left">
<h2 class="title-inverse"><span class="title-text">ALUMINUM EXTRUDED PROFILE</span></h2>
<div class="section-content-right" id="right-sec2">
<p class="section-description">
Our team has worked with both small start-ups to established corporations with the task of enhancing their online presence by refining their brand to...
</p>
</div>
</div>
</section>
Basically, I changed the title to:
<h2 class="title-inverse"><span class="title-text">ALUMINUM EXTRUDED PROFILE</span></h2>
And its CSS rules to:
.title-inverse {
font-family: 'Roboto', sans-serif;
font-size: .8rem;
font-weight: 500;
line-height: 1.4em;
margin-top: 15%;
}
.title-text {
background: #FFF;
color: #000;
padding: 5px 10px 2px 15px;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
I have the following html structure where I style my titles with an underline and a shadow.
.title {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
I tried to apply a perspective effect with the following css
.container {
-webkit-perspective: 150px;
perspective: 150px;
}
.content {
-webkit-transform: rotateX(25deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">MY TITLE
</div>
</div>
</div>
As you can see, it works fine on the text but on the underline the shadow is not displayed and the distance from the text (text-underline-position: under;) is ignored.
Is there a way to display the shadow and keep the correct distance of the underline from the text when using the perspective?
You can simulate the underline with the pseudo element before:
.title {
display: inline-block;
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
position: relative;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 2px solid #000;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
}
See the example here
Another possibility: Fiddle
.title, .subtitle {
font-size: 28px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-align: center;
}
.title {
border-bottom: 2px solid;
box-shadow: 2px 2px #32c8ff;
}
.container {
display: table-cell;
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
.content {
-webkit-transform: rotateX(45deg);
transform: rotateX(25deg);
}
<div class="container">
<div class="content">
<div class="title">GREENPEACE</div>
<div class="subtitle">THE SURFER</div>
</div>
</div>
Check this out:
https://jsfiddle.net/zzhn5gh7/
.container {
width: 200px;
height: 200px;
border: 1px solid #CCC;
margin: 0 auto 60px;
position: relative;
-webkit-perspective: 600px;
-moz-perspective: 600px;
-o-perspective: 600px;
perspective: 600px;
}
.title {
width: 100%;
height: 100%;
position: absolute;
background: green;
font-size: 35px;
line-height: 1;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: underline;
text-underline-position: under;
}
#rotate-x .title {
-webkit-transform: rotateX( 45deg);
-moz-transform: rotateX( 45deg);
-o-transform: rotateX( 45deg);
transform: rotateX( 45deg);
}
<div id="rotate-x" class="container">
<div class="title">MY TITLE
</div>
The right solution for me was the following:
.title {
display: inline-block;
position: relative;
font-size: 28px;
line-height: 2.5;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
text-decoration: none;
}
.title::before {
border-bottom: 4px solid #ffffff;
bottom: 0;
content: "";
position: absolute;
left: 0;
right: 0;
box-shadow: 2px 2px #32c8ff;
margin: 11px 0px;
}
.subtitle {
font-size: 28px;
line-height: 0.7;
letter-spacing: 0px;
text-shadow: 2px 2px #32c8ff;
}