how to add a shape divider in vuetify.js - vue.js

I am using vuetify and I'm trying to add a shape divider like what I've shown in the picture, but I'm unable to do it.

You need to do that with HTML and CSS.
There is some ways.
It would be done with a background image
Another way is a svg file and css
Do it with css transform
You can check this codepen
header {
position: relative;
height: 300px;
background-image: linear-gradient(#ff9d2f, #ff6126);
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
color: white;
}
.divider {
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100px;
/* drop the height to have a constant angle for all screen widths */
}
<header>
<h1>Header Content</h1>
<img src="https://assets.codepen.io/t-517/divider-triangle.png" class="divider" />
</header>
<section>
<h1>Section Content</h1>
</section>
to get Idea how to make it as 2nd way .
and this one codepen for make it with css transform(third way).
header {
position: relative;
height: 300px;
overflow: hidden;
}
.header__bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: 100%;
background-image: linear-gradient(#ff9d2f, #ff6126);
transform: skewY(-6deg);
transform-origin: top left;
}
h1 {
margin: 0;
padding: 100px 0;
font: 44px "Arial";
text-align: center;
}
header h1 {
position: relative;
color: white;
}
<header>
<div class="header__bg"></div>
<h1>Header Content</h1>
</header>
<section>
<h1>Section Content</h1>
</section>

Related

AOS Fade-In not working on parallax scrolling

AOS fade in should work on scroll, but setting overflow-x and y interferes with the effect. Nothing happens on scroll, fade in only works when i resize the window. I'm using this library: AOS Library
main {
height: 120vh;
perspective: 2px;
overflow-x: hidden;
overflow-y: auto;
}
section {
transform-style: preserve-3d;
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
z-index: -1;
}
.no-parallax {
height: auto;
background-color: #000000;
}
.no-parallax_footer {
z-index: 999;
width: 100%;
}
.parallax::after {
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: 8;
}
<script src="https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-quad',
});
</script>
Does someone know how to work around this problem?
I found the same problem here, but it doesn't work on mine.
Solution is to add: <script>document.body.querySelector('main').addEventListener('scroll', AOS.refresh);</script>

Safari linear gradient

I have a trouble using linear-gradient in Safari 15.2.
I wanna to create a block with fade effect at the end if children do not fit.
I have created an example: https://codepen.io/serejich/pen/xxXLvEG.
Code:
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 50px), coral);
}
If you will open this in Safari, there would be something like a white area at the right of block.
What causes this and are there any ways to fix it?
This is a bug in safari that has to do with the way browsers interpolate between gradients.
A common answer is to do what you did, using rgba(255, 255, 255, 0), however, Safari still interprets this as white and leads to that unwanted additional of white to the gradient. A fix is to use the same color you are transitioning from (coral in this case) and set it to transparent, which for coral would be rgba(255, 127, 80, 0). The example below uses the code from your pen with the fix applied for safari.
See this stack for more
* {
margin: 0;
}
.gradient-container {
background-color: coral;
width: 200px;
height: 30px;
position: relative;
display: flex;
align-items: center;
}
.elements {
padding: 0 10px;
display: flex;
column-gap: 10px;
overflow-x: hidden;
}
.elements p {
color: #fff;
white-space: nowrap;
}
.gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*RGBA equivalent to coral html color with alpha set to 0 - fixes safari interpolation bug*/
background: linear-gradient(to right, rgba(255, 127, 80, 0) calc(100% - 50px), coral);
}
<div class="gradient-container">
<div class="elements">
<p>Element 1</p>
<p>Element 2</p>
<p>Element 3</p>
</div>
<div class="gradient"></div>
</div>

Why aren't the endpoints of my boxes meeting evenly (div positioning)

Picture of positioned div's using css
based on the css that i wrote using absolute position, I thought the boxes would meet evenly on the ends but the blue box is not flush with the yellow box. Is there a rule that i'm misunderstanding?
Add top: 0; and left: 0; to class blue. By default they are being set to top: 8px & left: 8px causing the overlap.
.blue {
height: 100px;
width: 100px;
background-color: blue;
position: absolute;
top: 0;
left: 0;
}
.yellow {
height: 100px;
width: 100px;
background-color: yellow;
position: absolute;
top: 100px;
left: 100px;
}
.red {
height: 100px;
width: 100px;
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="yellow"></div>
</body>
Add this to your blue class
top: 0;
left: 0;
This may help more as well: How to place div in top right hand corner of page

How to do dynamic pseudo class width calculation inside methods?

I want to build a stepper component (trying to avoid using packages as less as possible). I have created it using plain HTML template and CSS and I want to size the ::before element according to the x number.
Something like this width: ${100% / 4}. I tried this method using methods and got a rendering error. Is it possible to do this? Or there is another way to achieve this?
Please have a look at my script:
<template>
<div class="c-stepper">
<div class="step-item" :style="drawLinePrecision(4)" v-for="item in 4" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
drawLinePrecision(length) {
return `.step-item:not(:last-child)::before {
content: "";
height: 3px;
width: ${(100% / length)};
position: absolute;
top: 25%;
background-color: $primary;
}`
}
}
}
</script>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
position: relative;
.step-item {
&:not(:last-child)::before {
content: "";
height: 3px;
width: calc(100% / 4);
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>
I just found a solution after some workaround. Instead of doing it like that, I had to make the width of the .step-item to be fixed by 100% except the last child and move the position: relative; from the parent down to the step-item itself.
Now, All I need is to set the padding from the parent component which display the c-stepper component.
Here is my script:
<template>
<div class="c-stepper">
<div class="step-item" v-for="item in 11" :key="item">
<div class="step-marker">
<i class="icon icon-duotones-check"></i>
</div>
<div class="step-info">
<p class="step-title">Step 1</p>
</div>
</div>
</div>
</template>
<style lang="scss" scoped>
#import "../../sass/variables";
.c-stepper {
display: flex;
justify-content: space-around;
align-items: center;
margin: 5rem 0rem;
.step-item {
margin: 0px auto;
position: relative; // step item must be relative
&:not(:last-child) {
width: 100%; // make it fixed
}
&:not(:last-child)::before {
content: "";
height: 3px;
width: 100%; // make it 100% width so that it won't let any gap to be rendered in the ui
position: absolute;
top: 25%;
background-color: $primary;
}
.step-marker {
position: relative;
width: 50px;
height: 50px;
background-color: white;
border: 3px solid $primary;
border-radius: 50%;
.icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
}
</style>

Overlay on hover in vue.js

Im trying to implement displaying text when hovering over an image in vue.js but I am a bit stuck. Im trying to implement this example on an array with multiple images:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade
I got a pretty big vue file but here is the essential:
template:
</template>
[...]
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link #mouseover.native="hovertext" :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
</router-link>
</div>
[...]
</template>
script
<script>
export default {
data() {
return {
info: [
{
id: 1,
title: "Title one",
link: "project1",
hovertext: "project1 hover text lorem lorem lorem",
category_data: {
"1": "Category 1"
}
},
[...]
methods: {
hovertext() {
console.log("");
},
I had some idea to try to use a method to put the text in a div under the image but then I cannot get the text to get above the image on hover. And I cannot get the method right ... Not really sure this is a good way doing it,
I also found this codepen example:
https://codepen.io/oliviaisarobot/pen/xzPGvY
This is pretty close to what I want to do but I cannot get the text to display here either.
I am a bit lost. Any help how to do this in vue?
---------- UPDATE ----------
I want the image boxes to stretch so they always fits the window but I seems to get a gap between my flexbox rows which I cannot seem to get rid of. You can see the white space. I attach my stylesheet.
.list-complete {
display: flex;
height: auto;
flex-direction: row;
flex-flow: row wrap;
}
.list-complete-item {
flex: 0 1 50%;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 100%;
height: auto;
outline: 1px solid #fff;
}
.list-complete-img {
width: 100%;
}
.text {
color: rgb(186, 74, 74);
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
height: 60%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #008cba;
}
You don't need to use js(vue) events. Do it with plain css, like in example you linked to.
Go with this template:
<div v-for="item in filteredPeople" v-bind:key="item.id" class="list-complete-item">
<router-link :to="'/'+item.link">
<img class="list-complete-img" :src="'http://placehold.it/400x300?text='+item.id" alt>
<div class="overlay">
<div class="text">{{ item.hovertext }}</div>
</div>
</router-link>
</div>
And style it up:
.list-complete-item {
width: 400px;
height: 300px;
display: inline-block;
}
.list-complete-item a {
display: inline-block;
position: relative;
width: 400px;
height: 300px;
}
.list-complete-item a .image {
display: block;
width: 100%;
height: auto;
}
.list-complete-item a .overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.list-complete-item a:hover .overlay {
opacity: 1;
}
.list-complete-item a .text {
color: white;
font-size: 20px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
And the final result: