I am using Tailwind CSS to style a Next.js website.
I have an image element for which I am using Next.js Image element.
Now I want to open a modal on top of the current page. But I don't want to completely black out the underlying page, just dim it. For this I am using an absolutely positioned element with a 50% opacity on top of everything else.
With my current setup, everything below the absolutely positioned element does get dimmed, except for the Image elements which seem unaffected from everything.
The jsx looks like this:
<div>
<div className='absolute inset-0 flex items-center justify-center bg-black'>
<h1 className='bg-gray-600'>MODAL</h1>
</div>
<div className='px-auto mx-32 grid grid-cols-2 gap-3'>
<h1 className='col-span-2 my-5 text-3xl font-black'>
Header
</h1>
<div id='CardElem'>
<div id='memberCard' className='p-3 shadow-2xl'>
<Image alt='avatar' width=250 height=250 src='imgSrc' />
<h1 className='text-2xl font-black'>text1</h1>
<h2 className='text-xl font-bold'>text2</h2>
<h3 className='text-lg'>text3</h3>
</div>
</div>
<div id='CardElem'>
<div id='memberCard' className='p-3 shadow-2xl'>
<Image alt='avatar' width=250 height=250 src='imgSrc' />
<h1 className='text-2xl font-black'>text4</h1>
<h2 className='text-xl font-bold'>text5</h2>
<h3 className='text-lg'>text6</h3>
</div>
</div>
</div>
</div>
With this setup, every h1, h2, h3 gets dimmed by the absolute div. Only the two Image tags stay fully visible.
Is there something wrong with my setup?
The issue was the order of the elements. The absolutely positioned element should be below the other elements
<div>
<div className='px-auto mx-32 grid grid-cols-2 gap-3'>
<h1 className='col-span-2 my-5 text-3xl font-black'>
Header
</h1>
<div id='CardElem'>
<div id='memberCard' className='p-3 shadow-2xl'>
<Image alt='avatar' width=250 height=250 src='imgSrc' />
<h1 className='text-2xl font-black'>text1</h1>
<h2 className='text-xl font-bold'>text2</h2>
<h3 className='text-lg'>text3</h3>
</div>
</div>
<div id='CardElem'>
<div id='memberCard' className='p-3 shadow-2xl'>
<Image alt='avatar' width=250 height=250 src='imgSrc' />
<h1 className='text-2xl font-black'>text4</h1>
<h2 className='text-xl font-bold'>text5</h2>
<h3 className='text-lg'>text6</h3>
</div>
</div>
</div>
<div className='absolute inset-0 flex items-center justify-center bg-black'>
<h1 className='bg-gray-600'>MODAL</h1>
</div>
</div>
Related
Sometimes my code gets horribly ugly
Especially when I use frameworks like tailwind
When the project gets big, I can say without exaggeration that 90% of my time is spent finding the desired class between elements
One of the solutions to keep the code clean is to use own tags
I don't mean the new html5 tags like aside, header , footer , section , ...
for example
<div class="flex items-center justify-center p-4 rounded shadow">
<div id="inner"> <!-- A dirty tag to prevent display flex from affecting child tags -->
<div> somedata </div>
<div> somedata </div>
<div> somedata </div>
</div>
</div>
can replaced with
<card class="flex items-center justify-center p-4 rounded shadow">
<inner>
<div> somedata </div>
<div> somedata </div>
<div> somedata </div>
</inner>
</card>
even in vanilla css own tag's make the code more deciplined
example
<div class="post">
<header>
<div class="header__image">
<img src="example.jpg">
<div>
<div class="header_details">
...
</div>
</header>
<div class="post__content">
</div>
.....
</div>
it can be like
<post>
<header>
<picture>
<img src="example.jpg">
</picure>
</header>
<content>
<p> something </p>
<content>
...
</post>
Is there any Serious technical problems other than not being supported by old browsers?
After 21 day's coding own custom tags my answer is NO
I use my own tags like this
default tags:
<div class="card">
<header>
<img src="img_avatar.png" alt="Avatar" style="width:100%">
</header>
<div class="container">
<div>John Doe</div>
<p>Architect & Engineer</p>
</div>
</div>
own-tags
<card>
<header>
<image src="img_avatar.png" alt="Avatar" style="width:100%">
</header>
<container>
<name>John Doe</name>
<job>Architect & Engineer</job>
</container>
</card>
every thing is fine.
notes :
<custome-tags> default display is inline
<image> is synonym for <img>
<title> is text-only and display:none element. you can use <subject> instead
<col> is specifies column properties for each column within a <colgroup> element. you can use <column> instead
I have a built a split page layout that, is perfectly aligned as it was intended:
Constructed using:
<div className="flex flex-wrap">
<div className="w-full md:w-1/2 h-screen overflow-hidden order-last lg:order-first md:order-first">
<div className="flex h-screen">
<div class="m-auto max-w-3xl px-5">
{TeamData.slice(0, 1).map((item, index) => {
return (
<div>
<h1 className="text-3xl xs:text-2xl md:text-3xl lg:text-5xl xl:text-6xl mb-5">{item.name}</h1>
<p className="text-xl leading-10 uppercase mb-5 text-gray-700">{item.title}</p>
<p className="text-xl leading-10 mb-5">{item.bio}</p>
</div>
);
})}
</div>
</div>
</div>
<div className="bg-green w-full md:w-1/2 h-screen order-first lg:order-last md:order-last">
<img className=" object-contain h-screen w-full" src={require('../images/johne_doe.png').default} data-aos="fade-up" alt="John Doe" />
</div>
</div>
Upon screen resizing to sizes smaller than 1440px in width, however, the portrait images get considerably offset from the bottom.
How can I keep in its bottom alignment on smaller viewports using tailwind?
Add object-bottom to an image tag.
Yoг can find information about object-{side} here
I would like to place my logo on the border of two divs. I've two questions:
In which div should I place this logo: in div above or in div below or maybe put in another div?
How can I position it. I tried absolute and relative but it doesn't work.
It should looks like:
HTML
<!-- Favorites -->
<section class="favorites">
<h2 class="favorites-header">Urban Favorites</h2>
<div class="favorites-box">
<img src="img/burger-craft-burgers-e1497746930767.png">
<div class="favorites-info">
<h2>Craft Your Own Burger</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<div class="favorites-box-last">
<img src="img/burger-craft-fries.jpg">
<div class="favorites-info">
<h2>Loaded Cheese Fries</h2>
<p>Always get exactly what you want with this build-your-own classic. Always get exactly what you want with this build-your-own classic.</p>
</div>
</div>
<!-- Here is my logo --> <img class="favorites-logo" src="img/urban8-logo-shadow.png" alt="logo-shadow">
</section>
<!-- Review -->
<section class="review">
<div class="review-element">
<p>"Great meals!"</p>
<img src="img/five-stars.png">
<p>-Jane Doe</p>
</div>
<div class="review-element">
<p>"Awesome atmosphere!"</p>
<img src="img/five-stars.png">
<p>-Aicia Fox</p>
</div>
<div class="review-element">
<p>"Everything is ok"</p>
<img src="img/five-stars.png">
<p>-Cesar Algir</p>
</div>
<button>Leave a Review</button>
</section>
I'm having an issue where any Bootstrap v4 cards using the card-img-overlay to display text over an image prevents links below that image from working.
These links do work:
<div class="card" style="border-color: #333;">
<img class="card-img-top" src="..." alt="Title image"/>
<div class="card-inverse">
<h1 class="text-stroke">Title</h1>
</div>
<div class="card-block">
Card link
<p class="card-text">Article Text</p>
</div>
<div class="card-footer">
<small class="text-muted">Date - Author</small>
</div>
</div>
These links do NOT work:
<div class="card" style="border-color: #333;">
<img class="card-img-top" src="..." alt="Title image"/>
<div class="card-img-overlay card-inverse">
<h1 class="text-stroke">Title</h1>
</div>
<div class="card-block">
Card link
<p class="card-text">Article Text</p>
</div>
<div class="card-footer">
<small class="text-muted">Date - Author</small>
</div>
</div>
I see there is an open issue regarding this for bootstrap v4, but can anyone help with a workaround that would preserve the same look?
The overlay is position: absolute which gives that element a z-index, and the rest of the content in the card is statically positioned, so none of it has a z-index. You can give the link a z-index by adding a non-static position, and since your card link comes after the overlay in the HTML, the stacking order will put the card link's stacking order on top of the overlay.
.card-link {
position: relative;
}
As mentioned by Michael Coker, adding the below to your css resolves this issue.
.card-link {
position: relative;
}
I have two sections -> hero and teaser, and in the teaser section i need make the teasers pictures appear just a bit upon the hero section, but z-index, position relative and top -1 is not working, i believe this is happening because i am using overflow: hidden, i already try use z-index but is not working.
The code is a bit extensive, so i create a codepen.
This is what i want:
This is what is happening:
I cant use CSS3, just 2, unfortunately..
HTML:
<section class="hero">
</section>
<section class="teasers">
<div class="container">
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/pubcrawl.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/diversao.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/crawlers.jpg" />
<div class="teaser__content">
</div>
</div>
<div class="teaser">
<img class="teaser__image" src="public/images/main/teasers/staff.jpg" />
<div class="teaser__content">
</p>
</div>
</div>
</div>
</section>
Your .container has a style of overflow:hidden if you remove that you can see the overflow...
Updated codepen: http://codepen.io/anon/pen/JoBgER