This question already has answers here:
curved shape with curved line with blur effect CSS
(2 answers)
How to make a curved shape with gradient?
(5 answers)
Closed last month.
This post was edited and submitted for review last month and failed to reopen the post:
Original close reason(s) were not resolved
How could I create the curve like the top blue border with Tailwind CSS classes explicitly not using CSS stylesheet?
Edit: After some research, i figured out a way to achieve this.
Rounded Border:
<div class="overflow-x-hidden">
<div class="absolute bottom-0 mt-[100px] ml-[-50%] h-[500px] w-[200%] rounded-t-[100%] bg-gradient-to-b from-blue-400 via-blue-500 to-blue-600">
<div class="mt-5 text-center text-2xl text-white">Footer</div>
</div>
</div>
Output:
Rounded Corners:
Using rounded class with attribute value for simple curve at corners.
<div class="h-[100px] rounded-t-[100px] bg-blue-500">
<div class="p-5 text-center text-2xl text-white">Footer</div>
</div>
Output:
Refer: https://play.tailwindcss.com/fV3c2H8TOu for further changes
Related
I have a fixed aspect ratio area in my layout using Tailwind 3. It is defined like so...
<div class="grid grid-cols-1 lg:grid-cols-2 lg:grid-rows-1">
<div class="text-xl text-gray-700 lg:text-lg [&>p]:py-5 [&>p]:pl-5">
<p>Lorem ipsum</p>
</div>
<div class="grid place-items-center">
<div class="aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
<div>
wevs
wevs
wevs
</div>
</div>
</div>
</div>
It looks like this, which is what I want, the bottom parallel with however long the text on the left happens to be. If I add more text on the left the fixed aspect area on the right scales to the height of the content on the left.
So I want that fixed aspect ratio area to contain its contents without changing size but when I put some extra content into it the whole container grows. Admittedly it grows in the fixed aspect ratio I have set so that is nice, but I'd rather it didn't grow at all!
Here is a link to a full example on Tailwind Play: https://play.tailwindcss.com/oNjWgFb2AW
With a wide screen (1440px) if you keep adding "wevs" you will see the effect.
I've tried a bunch of way to fix the width and also tried playing with limiting the height fidgeting with the grid values but I'm not having any luck. Everything I've tried seem to either break the aspect ratio part, or the container still scales up with the content. 🙏
I added max-h-0 and it works
...
<div class="max-h-0 aspect-9/16 w-full bg-blue-300 lg:min-h-full lg:w-auto">
...
here is with the example of your playcode https://play.tailwindcss.com/32quTcDj51?size=1440x803
I'm (very) new to Tailwind and have encountered a problem that is driving me crazy. I'm looking to place an image in a footer. At desktop size (1024px), the image needs to sit to the left of the footer content and then on smaller screens, the logo needs to be centered, pretty standard stuff. As with non-tailwind css, I'm using margin to control this and as guided in the documentation, my default setup is in mobile-first so the horizontal margin is set to auto with the following to put the image in the middle with the aim for it to be set to the left when being viewed at a bigger resolution:
<img alt="..." :src="logo" class="mx-auto"/>
The key thing here is mx-auto which centers the image. As per the documentation, I then want to remove the auto-positioning so I add the following to adjust the margin once the screen is at a bigger resolution.
<img alt="..." :src="logo" class="mx-auto lg:mx-0"/>
However, when I run this the image just stays positioned in the center of the element when at full desktop resolution. I've tried using ml-0 just in case there was a problem overriding the original setting but in the inspector, the media query doesn't even attempt to override.
I'm building from a template that does similar things to what I want elsewhere in the project however when I copy that code over, it works until I make a change to the setting (changing a -16 to a -20 etc...) which is also odd. I'm not sure if I've messed something up with my configuration or am just missing something basic but any pointers would be really appreciated.
Just in case its something to do with the container the image is in, here's the wider container:
<div class="container mx-auto px-4">
<div class="flex flex-wrap text-center lg:text-left">
<div class="w-full lg:w-6/12 px-4">
<img alt="..." :src="logo" class="max-w-250-px pb-4 mx-auto lg:mx-0"/>
</div>
</div>
</div>
Maybe something to do with the flex?
It is max-w-[250px] not max-w-250-px
Why not use the flex container you already have to get it done?
What you want is this: https://play.tailwindcss.com/wgHwT7KMJ5
i read a article from here http://victorshi.com/blog/post/How-to-make-a-div-center-in-Bootstrap3 that how to center a div when using bootstrap framework.
their code
<div class="row">
<div class="col-lg-6 col-lg-offset-3 text-center">center</div>
</div>
i just like to know why they use col-lg-offset-3 ? why they did not use col-lg-offset-2 or col-lg-offset-4 etc.
please guide me about the above code sample. thanks
col-lg-6 is a div with width 6 columns (out of 12). The col-lg-offset-3 pushes the div 3 columns to the right. In this case, the row displays a div of half width (6/12 columns) in the center of the div (3/12 pushes 6/12 to the middle).
All of this is documented very well here. I would encourage you to read the documentation and experiment before posting questions to stack overflow in the future.
Its like using margins in this case it adds a dynamic margin-left based on column width.
I just started to use angular ui-layout to allow splitting panes in a UI.
I'm trying to create a sidebar that has this blue element on the bottom
Is there a way to trick the ui-layout directive to achieve this? I tried doing size, but that just does absolute sizing, I want the bluebox just take up some space (showing 100% of its content) and the element above it needs to scroll and take up the rest of the vertical space.
EDIT: added the HTML
<ui-layout options="{ flow: 'row' }">
<div ui-layout-container> top part </div>
<div ui-layout-container> blue box</div>
</ui-layout>
I don't know why you want to use ui.layout, but I would not recommend to use it to achieve what you want.
ui.layout uses flex box model and you can use it by yourself without using another invasive javascript layout. You can fully achieve what you want using css only.
This is what I did to achieve what you want only using CSS. http://plnkr.co/edit/0mSxkNC5wl6WTbWc81z6?p=preview.
<div class="container flex flex-column">
<div class="top flex flex-row flex-auto flex-stretch">
<div class="flex-auto">Top</div>
<div class="sidebar">sidebar</div>
</div>
<div style="background:blue">Bottom</div>
</div>
If you are very interested in using Flex layout, I would recommend to use Angular Material Design, and it is advanced and makes more sense than ui.layout.
To know more about flex box, you can see this example.
http://plnkr.co/edit/lxx7QCwZbeZyyUtwiCym?p=preview.
This question already has answers here:
CSS Floating Divs with different height are aligned with space between them
(3 answers)
Closed 9 years ago.
I would like to display a row of tow divs next to each other while in the next row, the next div sits directly under the last one. Like this:
Because the layout has to be built into an CMS, I can't put Box 1,3 and 2,4 in a separat div. Is there a way to achieve this kind of behavior without extra wrapping elements? (Normal float behavior doesn't work, display inline/inline-block also doesn't do the trick.) Or is some JavaScript required to build a layout like this?
Because of the different heights, this looks like the problem where I still haven't found a general purpose pure CSS technique to handle it properly, despite trying really hard.
I've posted this answer before: css alignment question
I've given up and used a jQuery plugin
to do this in the past for something
similar:
jQuery Masonry
A picture is worth a thousand words:
you can use the nth-child(odd) to clear the float:left;.
css
.box {height:100px;width:100px;float:left;}
.box:nth-child(odd) {clear:left;}
.green {background:green;}
.red{background:red;}
.blue {background:blue;}
.yellow {background:yellow;}
html
<div class="box green">BOX 1</div>
<div class="box red">BOX 2</div>
<div class="box blue">BOX 3</div>
<div class="box yellow">BOX 4</div>
Demo: http://jsfiddle.net/YSP2S/
Keep in mind that this will not work for internet explorer. You can use conditional comment and javascript to achieve the same for internet explorer also.