I wanna have transition-transform and transition-shadow, not neither transition-all nor only one. Putting the two not effecting, i couldn't find doc for it, i tried playing around like: transition-[transform, shadow] and obviously didn't work.
Basically, i have cards, you hover on it, it scale up a bit and drops a shadow.
className='hover:scale-105 hover:shadow-2xl transition-transform transition-shadow'
How to put transition properties transform and shadow together?
My app has white and black theme, that's way i don't want just to put transition-all because it flashes when switching the theme.
Only for TailwindCSS v3
Setting a class like transition-[transform, shadow] is interpretted by browsers as two separate classes: transition-[transform, and shadow].
You need to remove the space if possible or replace it by an underscore (_). That said, in your case you simply need to write:
transition-[transform,shadow]
// or
transition-[transform,_shadow]
If you want to customize their durations as well you can write something like:
[transition:transform_1s,shadow_2s]
Based on Adding Custom Styles - TailwindCSS v3
When an arbitrary value needs to contain a space, use an underscore (_) instead and Tailwind will automatically convert it to a space at build-time:
<div class="grid grid-cols-[1fr_500px_2fr]">
<!-- compiled to -- grid-template-columns: 1fr 500px 2fr; -->
</div>
In situations where underscores are common but spaces are invalid, Tailwind will preserve the underscore instead of converting it to a space, for example in URLs:
<div class="bg-[url('/what_a_rush.png')]">
<!-- compiled to -- background-image: url('/what_a_rush.png'); -->
</div>
In the rare case that you actually need to use an underscore but it’s ambiguous because a space is valid as well, escape the underscore with a backslash and Tailwind won’t convert it to a space:
<div class="before:content-['hello\_world']">
<!-- compiled to -- content: var('hello_world'); -->
</div>
I needed to do transition-[transform,box-shadow] not shadow
It is a bit off the question, however since I found this answer while searching for a solution I will give it a try.
To combine 2 transition properties with different durations or timing function, you would need to use Tailwindcss v3 with something like:
before:[transition:_color_0.1s,transform_0.2s_ease-out]
It answers https://stackoverflow.com/users/16945230/a-anvarbekov problem, I would have commented it but SO requires 50 reps to comment now.
Hope it helps some people out there!
Related
I'm having an issue where an unordered list created by data-sly-list is adding whitespace that isn't represented in the DOM or by any class. If I manually code the list rather than letting data-sly-list handle it, the whitespace isn't added.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<div data-sly-unwrap data-sly-list.slidesNode="${resource.listChildren}">
<div data-sly-unwrap data-sly-list.states="${slidesNode.listChildren}">
<li data-sly-test="${states.valueMap.flag}">
<sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}" data-sly-unwrap>
${states.valueMap.name}
</sly>
</li>
</div>
</div>
</ul>
</div>
If I hardcode the list like the following, there's no whitespace
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
<li>Accessibility
</li>
</ul>
</div>
There's also a htmlpaths.js involved:
"use strict";
use(function() {
var path = this.thePath;
var httpRegex = /http/;
var hashRegex = /#/;
if (path !== undefined && (httpRegex.test(path) === false && hashRegex.test(path) === false)){
path = path + '.html';
}
return {
href: path
}
});
The only difference I see is that its run through Sightly iterating. Is there any fix to this? In addition to listing I'm trying to break them into columns with the following CSS
li {
width:25%;
float:left;
display:inline;
}
This works perfectly fine on the hardcoded list, but on the Sightly iterated one it creates all kind of weird spacing issues that change based on screen width
This whitespace isn't accounted for at all in the DOM. I'm not sure what to do.
More weirdness:
If the margin top is set to -9 or higher, it looks like the above screenshot. But if its set to -10 or lower, it looks like this
It's like its a breakpoint, it goes from one extreme to the other on that one pixel change. No change otherwise. It's bizarre.
It's a little weird behavior in sightly, when you have some extra spaces in your HTML code, it will display with extra spaces in the HTML.
Try to remove all the spaces in the HTML as shown below and try it.
<div class="bullets"><ul class="columns unordered-list" id="stateList"><sly data-sly-list.slidesNode="${resource.listChildren}"><sly data-sly-list.states="${slidesNode.listChildren}"><li>${states.valueMap.name}</li></sly></sly></ul></div>
You can use HTML formatter in your IDE or online tools like below to format the HTML for a readable format
https://www.freeformatter.com/html-formatter.html.
<div class="bullets">
<ul class="columns unordered-list" id="stateList">
<sly data-sly-list.slidesNode="${resource.listChildren}">
<sly data-sly-list.states="${slidesNode.listChildren}">
<li>${states.valueMap.name}</li>
</sly>
</sly>
</ul>
</div>
This should get rid of the extra spaces in your HTML.
Also, it is best to use sightly tags wherever we need some conditions to check or embed them directly in the actual div tag or html tags instead of using data-sly-unwrap.
You can also use sling models to get the required data and check all the conditions(including appending html) in the backend and send the data just to display and avoid all the conditions in sightly.
Using data-sly-unwrap or a sly tag still adds an empty line in the generated HTML. Even though most browsers ignore those spaces, they might cause issues in some cases. If you want the HTL output to look similar to your hardcoded HTML, try placing the use statement and anchor tag in a single line as shown below.
<div class="bullets">
<ul class="columns unordered-list" id="stateList" data-sly-list.slidesNode="${resource.listChildren}">
<li data-sly-repeat.states="${slidesNode.listChildren}" data-sly-test="${states.valueMap.flag}"><sly data-sly-use.htmlpaths="${'htmlpaths.js' # thePath=states.valueMap.path}">${states.valueMap.name} </sly></li>
</ul>
</div>
Also, a few tips
The sly tag doesn't need a data-sly-unwrap. It is automatically
removed in the generated HTML.
data-sly-list can be added to the parent ul tag itself instead of introducing an extra div tag and then unwrapping it.
Use data-sly-repeat instead of data-sly-list wherever possible. I was able to bring down the generated HTML of one of our complex pages from 20k lines to 12k lines, as data-sly-repeat doesn't introduce additional white spaces.
Solution
The issue is on line 7 of your HTL template:
${states.valueMap.name}
You have a space at the end of the inner HTML of your tag ;)
Unrelated
Regarding your htmlpaths.js script, are you aware of Transformers in AEM? You can use them to implement a global Link Rewriter which will fix links when a page is rendered, much like your script does. You can see an example here: https://helpx.adobe.com/experience-manager/using/aem63_link_rewriter.html
If you decide to keep htmlpaths.js, you may want to review it because I'm afraid there might be some problems with it. Of course, I don't know your requirement so it's just a suggestion :)
Is it possible to transform a phrase to plural using just CSS, based on the number within the element?
I'm guessing this breaks a presentation/data separation boundary philosophy, but just wondering if it's possible. It's easy with JavaScript, but wondering if CSS can take care of it.
<span class="plural">0 book</span>
outputs: 0 books
<span class="plural">1 book</span>
outputs: 1 book
<span class="plural">2 book</span>
outputs: 2 books
No. CSS cannot read the content of the element to determine what number it is, and CSS doesn't have if conditions.
If you would only apply .plural to items that should be regularly pluralized, you could do:
.plural:after {content: "s"}
But then we run into the problem of how English is irregular, and not all plurals are guaranteed to end in "s".
Going to try answer this myself, as it seems a pure CSS solution is not possible. I've found a small workaround here that works for me. It's not ideal, but may work for others too..
I just render the number behind the plural class name and wrap this around the s. Then I use a class for plural1 that hides the s.
This works for me because I use templates to render my html and it's easy to slot the numbers in.
.plural1 {
display: none;
}
<div>-1 book<span class="plural-1">s</span>
</div>
<div>0 book<span class="plural0">s</span>
</div>
<div>1 book<span class="plural1">s</span>
</div>
<div>2 book<span class="plural2">s</span>
</div>
Pros: This can work for other endings and other languages too. Negative numbers are supported.
Cons: Adds unused classes to your elements (plural2, plural3, etc.) that the browser will need to read and ignore. Not really an issue for a small number of object though (eg. 100).
I'm playing around with word-wrap and white-space for a while now, but I cant get this to work. I want no word separation in my headings, so long words should just be put into the next line. To clearify this, if the container is too small, I dont want it to behave this way:
A veeeeeeeeeeeeeeee-
eeeeery long heading
I want it to be that way:
A
veeeeeeeeeeeeeeeeeeeeery
long heading
This is my markup:
<header>
<h3>Some random blog heading</a></h3>
</header>
CSS:
article h3{
width:200px;
word-wrap:normal;
word-break: normal;
white-space: nowrap;
}
I think I tried every possible combination, but it didnt do what I want. I cant imagine that it isnt possible.
If you currently see a word divided in two lines as in your first example and you don’t want that, you just have to locate the thing that causes the word division. This can be CSS hyphenation with the hyphen property, or it may be caused by the SOFT HYPHEN character (possibly inserted via scripting), or even a common hyphen character “-” in the word – most browsers treat it as allowing a line break after it.
If you need help with the analysis, I think you need to reveal some of the actual content and markup and perhaps styling and scripting.
Apply css on it
<div style="word-wrap:break-all;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
or
<div style="word-wrap:break-word;">A veeeeeeeeeeeeeeeeeeeeery long heading</div>
margin-left: 100 + 20%;
I want to do something the same as above. But CSS does not have any format. How can I successfully use these together ?
Without javascript? Only by wrapping that content into another element (usually <div>) and splitting that margin to two elements.
Something like:
<div style="margin-left:20%">
<div style="margin-left:100px">
<!-- content -->
</div>
</div>
Hi there and welcome to StackOverflow. Unfortunately CSS doesn't have this (good) behaviour, but LESS will. For a JavaScript implementation, look here. If you want a PHP implementation, look here. You may be confused as to why I'm talking about JS and PHP, but what LESS will do is take your .less file and turn it into a vanilla CSS file, either on the client (JS), or on your server (PHP).
This is NOT a question about how to create columns in css - so please dont give me any css for doing that. I've just excluded it here for readability.
I have created two columns in css and I want to place items in them based upon some css class. I think this is possible but I'm not sure how.
<DIV id="col1">
<!-- I want to display everything with 'women' here -->
</DIV>
<DIV id="col2">
<!-- I want to display everything with 'men' here -->
</DIV>
<!-- this content is dynamically generated in a loop (PHP/ASP.NET)-->
<DIV id="products">
<DIV class="women">
Women's product 1
</DIV>
<DIV class="men">
Men's product 1
</DIV>
<DIV class="men">
Men's product 2
</DIV>
</DIV>
Edit: Just to be sure I don't want to duplicate the product list into col1 and col2. i want to move them. I only want once visible copy of each item.
So I have two columns - or areas on the page - whatever - doesn't matter for this.
I want to use css to take everything under .products.women and put it in column 1.
I want to use css to take everything under .products.men and put it in column 2.
How can I do this. These kinds of things are about my limit to css, but I know theres some cleverness I can use.
Currently I'm rendering into the columns in two separate for loops. I want to get away from this for two reasons :
I dont want to maintain 2 identical for loops - nor move that logic elsewhere
I want to make an 'iphone' friendly version and i figure this will make that easier.
You can't do precisely what you're asking for with CSS. But you can do .women { float: left } .men { float: right}, which may be just about as good.
This is kind of a band-aid on your fundamental problem, though, which is failure to separate your presentation logic from your control logic. Instead of having two identical for loops in your presentation logic, you should have one for loop outside of it that builds two arrays, then your presentation logic should use each the way that would actually be beneficial to it.
CSS it's a language used to describe the presentation of the (existing) content. You are
asking for programaticaly DUPLICATE or COPY some of that content.
You can either use ASP/PHP whatever languaje of choice to generate multiple copies of that content, or use javascript to copy-move-change it.
Actually javascript seems to fit your scenario.
EDIT: you have a similar previous question here: using css to duplicate html elements
Interestingly (but, at this point, completely uselessly), this is not only possible in the current draft of the CSS3 Advanced Layout Module (aka Template Layout), but the spec contains an example showing how to do exactly that (last example in section 3.4). So if you can stand to wait a fifteen years or so...