Make an element rotated & overflow to top + rounded inside border - html

I have two problems :
How to make the text container rotated in front of background and cut its top like this example. My current approach make it overflow the bottom of the background :
https://codepen.io/fadhilradh/pen/wvdZPEE
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 12px;
border: 20px solid white;
height: 80%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
<div class="wrapper">
<div class="banner"/>
</div>
How to make the inside border rounded like the example.
I really appreciate if you can help me

Possibly something like this?
body {
overflow: hidden;
}
.wrapper {
background-image: linear-gradient(
to right,
#00dbde,
#00cfff,
#00b8ff,
#6a8cff,
#fc00ff
);
height: 800px;
width: 100%;
}
.banner {
color: #35C222;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-start;
padding: 16px;
background: black;
border-radius: 50px;
border: 30px solid white;
height: 70%;
width: 100%;
font-family: "Source Code Pro";
transform: rotate(-30deg);
margin-top: -300px;
}
.frontend {
font-size: 70px;
margin-bottom: 0;
margin-left: 100px;
}
.time {
transform-origin: bottom left;
transform: rotate(90deg) translate(-80%);
}
<div class="wrapper">
<div class="banner">
<p class="time">{time.format("MMMM Do YYYY, h:mm:ss")}</p>
<p class="frontend"> < SPE / Frontend > </p>
</div>
</div>

Add following lines to the CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Just make sure that the border is smaller than the border-radius.

Related

How to responsively roll down area in CSS

I'm trying to add a text area with a white background:
I wanted the white area to be lower and further to the right.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
.whoami p {
padding-top: 5%;
font-size: 105%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
Does someone know how to do that?
Thanks
If you want to play in white space, you can flex your main container and move the contents around as you wish.
.grey-zone {
color: white;
width: 100%;
height: 70vh;
background-color: #2f3e4d;
display: flex;
align-items: end;
justify-content: end;
}
If you add the last 3 css codes I added, you will fix the white box to the bottom right.
One way is using from padding for .grey-zone:
.grey-zone {
box-sizing: border-box; /*here*/
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
padding: 20px 0 0 20px; /*here*/
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>
You can add this to you class .whoami
.grey-zone {
color: white;
width: 100%;
height: 100vh;
background-color: #2f3e4d;
}
.whoami {
color: black;
width: 25%;
background-color: #ffffff;
padding: .5%;
position: absolute;
top: 50px;
left: 20px;
}
<div class="grey-zone">
<div class="whoami">
<h1>Qui suis-je?</h1>
</div>
</div>

Absolute position in CSS

I'm new to CSS and I'm trying to place some dots at position 0,0 of it's parent div, but when I do so according to the below code, the dots disappear.
* CSS Code: *
.timeslot{
background-color: green;
border-top: solid gray;
}
.timeslot.selected{
border: #cc0000;
}
.timeslot.selected .dot{
background-color: #cc0000;
}
.timeslot .dot{
background-color: gray;
}
.dot {
position: absolute;
height: 25px;
width: 25px;
background-color: firebrick;
border-radius: 50%;
display: inline-block;
}
.square {
height: 25px;
width: 40px;
background-color: #555;
}
.dot .span {
padding-top: 8px;
}
.time-line-box {
height: 100px;
padding: 50px 0;
width: 100%;
/* background-color: burlywood;*/
}
.swiper-container {
width: 95%;
margin: auto;
overflow-y: auto;
}
.swiper-wrapper{
display: inline-flex;
flex-direction: row;
overflow-y:auto;
justify-content: center;
border-top-width: 20px;
}
.swiper-container::-webkit-scrollbar-track{
background:#a8a8a8b6;
}
.swiper-container::-webkit-scrollbar{
height: 2px;
}
.swiper-container::-webkit-scrollbar-thumb{
background: #4F4F4F !important;
}
.swiper-slide {
text-align: center;
font-size: 12px;
width: 50px;
height: 100%;
/*position: relative;*/
}
* HTML Code: *
<section class="time-line-box">
<div class="swiper-container text-center">
<div class="swiper-wrapper">
<div *ngFor="let time of dropDownArray" class="timeslot swiper-slide">
<div class="dot" [style.background-color]="getBackgroundColor(time)"><span>{{time.label}}</span></div>
</div>
</div>
</div>
</section>
I'm trying to place each dot at the absolute position of it's parent div timeslot . I might be missing something but I really tried everything I know. Hope to find some help.
Add position relative to your parent
.timeslot{
// ...
position: relative;
}

Text Gradients Not Working in Edge and Safari

I'm trying to create a text gradient in WordPress (I'm using SiteOrigin pagebuilder), but it doesn't work in Edge or Safari; the text has no color in either browser.
I've tried these suggestions:
CSS3 Text Gradients not working?
Gradient not working in Safari
But both solutions just gave me a linear background gradient, not a text gradient.
Here's the code I'm currently using:
<style>
.flip-up {
/*background: linear-gradient(90deg, #97b3e1ff, #c5c95df0);*/
background-image: linear-gradient(90deg, #97b3e1ff, #c5c95df0);
-o-background-clip: text;
-ms-background-clip: text;
-moz-background-clip: text;
-webkit-background-clip: text;
-o-text-fill-color: transparent;
-ms-text-fill-color: transparent;
-moz-text-fill-color: transparent;
-webkit-text-fill-color: transparent;
}
</style>
The text animations have been tested on their own (I'm using the Scroll Triggered Animations plugin); they work just fine in every major browser, so I know that's not the problem. My website is https://douxdolci.com/ (headers like "Affordable and Effective" are the problem). Any help would be appreciated!
Also: If there's no way to accomplish this, is there a way to use solid-color text in just Edge and Safari, but a gradient in all other browsers?
What you have to do is display: block; the element(s) containing the text you want color-gradiented.
Be aware that this means that you may now have to vertically center text with the line-height attribute and align text horizontally with text-align . . .
Safari and Edge need it this way - don't go figure, just go do it !
The logotype in this pen shows a simple example.
Please advise if it breaks in Safari - I shudder to imagine how Lambda Test may render it.
HTML
<body>
<header>
<div class="logodiv">
<div class="logo">
<img src='https://images.unsplash.com/photo-1593003520833-5c874a3cef28?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=400&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ' alt='My Logo'/>
</div>
<div class="logotext">
<div class="logotext1">Coca-Cola</div>
<div class="logotext2">The Real Thing</div>
</div>
</div>
<nav>
<ul class="navbar">
<li id="redlink" onclick="PAGE.switchPage('redlink')" class="link on">
RED
</li>
<li id="whitelink" onclick="PAGE.switchPage('whitelink')" class="link">
WHITE
</li>
<li id="bluelink" onclick="PAGE.switchPage('bluelink')" class="link">
BLUE
</li>
</ul>
</nav>
</header>
<article>
<section id="redpage" class="redpage band">
THIS IS RED PAGE FULL OF STUFF
</section>
<section id="whitepage" class="whitepage band hidden">
THIS IS WHITE PAGE FULL OF STUFF
</section>
<section id="bluepage" class="bluepage band hidden">
THIS IS BLUE PAGE FULL OF STUFF
</section>
</article>
<footer>
<div class="foot-cont">Oh . . . What An Awful Footer !
</div>
</footer>
</body>
CSS
html {
writing-mode: horizontal-tb;
box-sizing: border-box; /* Keeps borders inside the element bounds. */
font-size: 62.5%; /* Allows 1 rem = 10px in child and nested elements */
}
*, *:before, *:after {
box-sizing: inherit;
}
* {
margin: 0;
padding: 0;
}
body{
text-align: center;
margin: 0 auto;
height: auto;
font-family: Open Sans, sans-serif;
font-size: 1.4rem;
color: #000;
background-color: orange;
}
header{
margin: 0 auto;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
align-content: center;
width: 95%;
height: 150px;
font-weight: bold;
text-align: left;
}
.logodiv {
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
align-items: center;
align-content: center;
width: 45%;
height: auto;
}
.logo {
width: 30%;
height: auto;
}
.logo img {
width: 70%;
height: 100px;
}
.logotext {
display: flex;
flex-flow: row wrap;
justify-cintent: center;
align-content: center;
align-items: center;
width: 70%;
height: auto;
font-size: 5.0rem;
}
.logotext1 {
display: block; /* VITAL for Safari & Edge */
width: 100%;
height: 80px;
line-height: 1.0;
font: Lora;
color: red;
background-image: -webkit-linear-gradient(45deg, purple, red);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.logotext2 {
display: block; /* VITAL for Safari/Edge */
width: 100%;
height: 35px;
line-height: 1.0;
font-size: 3.0rem;
font-style: italic;
letter-spacing: 0.3rem;
background-image: -webkit-linear-gradient(45deg, #111B61, #C8A2C8);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
nav{
display: block;
width: 55%;
}
.navbar{
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
align-items: center;
align-content: center;
width: 100%;
height: 40px;
list-style-type: none;
text-align: justify;
font-size: 14px;
margin: 0;
padding: 0;
font-weight: bold;
color: #FFFFFF;
}
nav li {
position: relative;
width: auto;
height: 40px;
margin-left: 15%;
cursor: pointer;
}
nav li::after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
display: block;
content: '';
height: 2px;
width: 0;
background-color: #00FFFF;
opacity: 1;
transition: height 1300ms, opacity 1300ms, width 1300ms;
}
nav li:not(.on):hover::after {
width: 100%;
height: 2px;
opacity: 1;
}
.on::after {
text-decoration: none !important;
cursor: none;
}
.on::after{
width: 100%;
height: 2px;
opacity: 1;
}
.on {
cursor: none;
pointer-effects: none;
}
article{
width: 95%;
margin: 0 auto;
}
.band{
height: 800px;
font-weight: 600;
font-size: 4rem;
color: gold;
text-align: center;
display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
.hidden{
display: none;
}
.redpage{
background-color: #FF0000;
}
.whitepage{
background-color: #FFFFFF;
}
.bluepage{
background-color: #0000FF;
}
footer{
margin: 0 auto;
width: 95%;
text-align: center;
height: auto;
background: #000;
}
.foot-cont{
height: 100px;
font-size: 1.4rem;
font-style: italic;
color: #FFF;
display: flex; /* Important here, heh-heh */
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */
}
JS
const PAGE = ( () =>
{
const switchPage = (pagelink) =>
{
const onLink = document.getElementsByClassName("on")[0]; // Find current nav link element
const oldPageId = (onLink.id).substring(0, // Get id of corresponding page ...
(onLink.id).length - 4) + "page"; // ... by replace "link" with "page"
const newPageLink = document.getElementById(pagelink); // Find new nav link, i.e. link clicked on
const newPageId = (newPageLink.id).substring(0,
(newPageLink.id).length - 4) + "page"; // Deduce id of corresponding page
if (oldPageId != newPageId) // Only reload when clicking on different page
{
onLink.classList.remove("on"); // Remove active status from old nav link
newPageLink.classList.add("on"); // Show new nav link as active page
document.getElementById(oldPageId).classList.add("hidden"); // Hide old page content
document.getElementById(newPageId).classList.remove("hidden"); // Display current page content
}
}
return { switchPage: switchPage };
}) ();
flex or inline-flex are the problems.
Text gradient is not working when you are using flex elements.
Instead: using block or inline-block.
Sorry, I am using TailwindCSS for a long time.

How can I align the text in the center of the image

I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out
Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>
You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .

Best way to arrange elements in div

So I want to build a simple event box, to replace the default one in a calendar (react-big-calendar for reference, but I don't think it matters)
I would like to make it as responsive as possible, but I have started with a very static box, which corresponds to what I would like to see on a big screen.
Simple fiddle
.container {
width: 200px;
height: 200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding: 2px;
}
.event-slot-start-time {
font-size: 0.75em;
vertical-align: top;
position: absolute;
top: 0;
left: 0;
}
.event-slot-end-time {
font-size: 0.75em;
float: left;
vertical-align: bottom;
position: absolute;
bottom: 0;
left: 0;
}
.event-slot-label {
font-size: 1em;
top: 8px;
right: 5px;
position: absolute;
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
My goal is to have a 'centered, eventually slightly to the right' label,
and two small indications on the left that correspond to the start and end of the event.
I have tried using flexbox, coming from other StackOverflow answers, and it does seem to be able to do that somehow, but I have not managed to display the three elements properly. Any insight on a clean solution to achieve this result?
The simplest with the existing markup is to use Flexbox with column direction on the 2 date values and then position the label absolute using transform
.container {
width: 200px;
height:200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding:2px;
display: flex;
flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
font-size: 0.75em;
flex-grow: 1; /* share the vertical space equal */
}
.event-slot-label {
position:absolute;
font-size: 1em;
top: 50%;
left: calc(50% + 10px); /* adjust px value for horiz. offset */
transform: translate(-50%,-50%); /* vert./hor. center the label */
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
If you want a good responsive solution, use Flexbox all the way, here with a wrapper for the date's
.container {
width: 200px;
height:200px;
background-color: #dddddd;
margin: 20px;
padding: 5px;
}
.event-slot-component {
width: 100%;
min-height: 30px;
position: relative;
background-color: #64a7DD;
border: 5px;
border-radius: 3px;
padding:2px;
display: flex;
}
.event-slot-time {
display: flex;
flex-direction: column;
}
.event-slot-start-time,
.event-slot-end-time {
font-size: 0.75em;
flex-grow: 1; /* share the vertical space equal */
}
.event-slot-label {
flex-grow: 1; /* fill the remaining horizontal space */
font-size: 1em;
display: flex;
align-items: center; /* vertical center the label text */
justify-content: center; /* horizontal center the label text */
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-time">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>
You would need to nest your flexboxes. That's what's so wonderful about it!
To explain, what I did was created three wrappers.
One to hold the entire event.
One to hold your event times.
One to hold the status.
We used flex box to butt the event times and status-wrapper against each other. The event times only take up as much space as the text utilizes (plus a little padding). The status wrapper takes up 100% of its usable space.
Then status wrapper is set to flex box using the justify-content and align-items properties. This centers the status.
The status text container is used in the same way to center the status text itself.
.event-wrapper {
background-color: #eee;
display: flex;
}
.event-times-wrapper {
background-color: skyblue;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.status-wrapper {
width:100%;
display: flex;
align-items:center;
justify-content: center;
}
.status-text {
height: 100%;
display:flex;
align-items: center;
padding-left: 1rem;
padding-right: 1rem;
background-color: tomato;
}
<article class="event-wrapper">
<div class="event-times-wrapper">
<p class="event-start">9:00a</p>
<p class="event-end">10:00a</p>
</div>
<div class="status-wrapper">
<div class="status-text">Busy</div>
</div>
</article>
As OP requested later, a sample without special containers.
.container {
background-color: #eee;
position: relative;
width: 100vw;
height:6rem;
}
.event-slot-component div {
font-family: sans-serif;
color: white;
background-color: skyblue;
height:3rem;
float:left;
padding-left: 1rem;
padding-right: 1rem;
width:10%;
display:flex;
align-items:center;
justify-content:center;
}
.event-slot-component div:nth-child(2) {
background-color:red;
position:absolute;
bottom:0;
left: 0;
}
.event-slot-component div:last-of-type {
margin-left:25%;
background-color: tomato;
float:left;
height: 6rem;
}
<div class="container">
<div class="event-slot-component">
<div class="event-slot-start-time">17h</div>
<div class="event-slot-end-time">21h</div>
<div class="event-slot-label">Occupied Slot</div>
</div>
</div>