65 questions
0
votes
0
answers
73
views
Pure CSS - Persistent state in variables
I have some variables in my CSS sheet and I want to store a state (would be a number).
For example, I would like to create an "almost" infinite counter that would increment at each click.
...
- 33
0
votes
1
answer
50
views
Pure CSS - Responsive div depending on added text [closed]
I have this angular material code:
<mat-form-field>
<div class="mat-mdc-text-field-wrapper mdc-text-field mdc-text-field--outlined mdc-text-field--invalid">...</div>
&...
- 569
1
vote
0
answers
287
views
pure-css reverse scrolling trick, without using js or scroll-timeline
I need to make a simple box to go down the screen when I scroll down (move in reverse of the natural behavior) but only using stable CSS features and not any line of js.
is that possible?
I've already ...
- 396
-1
votes
1
answer
3k
views
How to make 5-star rating with CSS
I've edited a version of CSS 5-star rating, and need multiple of these ratings on my one page. However, when I changed the id on the different sets of 5 stars, and now it won't process checking the ...
- 7
0
votes
2
answers
2k
views
social media in nav bar
I'm making a website for university, and I've become stuck; I'm trying to display the social media links in the same line as the navigation and the logo, but it just won't work; the navigation works, ...
0
votes
1
answer
64
views
Flexbox Distribute items specific space
I have a situation of two columns inside a bootstrap row and I want to achieve the result depicted on the following image using only css/flexbox(not js at all):
Result
That means I want the space on ...
- 5
0
votes
0
answers
116
views
A11y in pure CSS solutions based on `input:checked` pseudo selector
I came across pure CSS solutions based on the pseudo selector input:checked, for example
https://webdevtrick.com/css-sidebar-menu/
https://webdevtrick.com/html5-css3-responsive-menu/
https://...
- 1,601
0
votes
1
answer
570
views
sass increase variable only if html element has a class
Is it possible to use an html element class as a condition for if statement or relative way in sass css?
In many cases in programming it is necessary to combine a loop and an if test to check if ...
- 11
0
votes
2
answers
662
views
purecss - why divs have different width on firefox and chrome?
Using PureCSS I have noticed that elements with pure-button class differs in width based on browser.
Using the following example:
<html>
<head>
<link rel="stylesheet" href=&...
- 842
0
votes
2
answers
891
views
How to put logo image centered above div using pure css or boostrap?
I want to place logo exactly linked linked below image (centered above div). How it can be this done using css? This template it is designed using tabler.io.
<div class="container-xl mt-3&...
0
votes
1
answer
613
views
Card Deck Carousel with Arrow Control
I want to create a Card Carousel with Pure CSS
https://www.codeply.com/go/WEbiqQvGhy
Is there any way to do it....
- 101
1
vote
3
answers
280
views
On remove "required" label not working properly
Codepen: link
.body {
position: relative;
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}
.wrap {
position: absolute;
right: 0;
top: 40%;
width: 350px;
left: 0;
margin:...
- 141
1
vote
1
answer
534
views
Can I use svg as button with an effect in the outline of the shape?
I'm a beginner and i was just wondering if I can use SVG icons as buttons like make hover for them and active ? and if there is a way to make a border for them but around the shape straight not the ...
3
votes
0
answers
62
views
Add different animation-delays to 20 divs in CSS
I need to apply different animation-delay values for 20 divs. The CSS I have below works but I wanted to know if there was a more efficient/shorter way of writing this in Pure CSS. The animation-delay ...
- 1,159
0
votes
1
answer
306
views
Progress Bar Implementation with pure CSS, problem with hover
I was following 100days of CSS Challenges. Got stuck on 62th day. Trying to implement a progress bar with pure css.
When hovering on cards I want progress bars to have larger width.
Below hover does ...
- 683