I need to customize thumb in Angular material slider, but so far I haven't succeed. Since the position of material element is already 'absolute', it's a bit tough to find a workaround with :after/:before. I have also tried to use clip-path, but it didn't work. Plus my variant should have shadows and there's problems with that when using clip-path.
Perhaps someone has faced a similar problem or can help recreate this form of an element without using 'position'.
Thanks
Related
I recently started learning Tailwind CSS because based on some research about the job market, I felt like it would be a nice marketable skill for my area.
Anyway, I am currently making a website in which I am trying to restrict myself from writing any other CSS classes apart from the ones given to me by Tailwind (In order to familiarize myself with "Tailwind Solutions" to certain problems). However I am kind of running into a dead end with a specific "issue".
I have a couple of circle "buttons" (they are images to be precise, but they have an "onClick" action). Instead of letting the user stumble upon the existence of this button randomly, I wanted to add a hover effect to the button so that a shadow appears around the image when the pointer is hovered on top of the image.
I have only tried the straightforward hover: shadow-sm class but I kind of expected this not to work because this is labeled in the Tailwind Docs as a "box-shadow". However I couldn't find anything else that could be applied in my case.
Any help would be appreciated.
Thank you in advance.
I played around with positioning & created this shadow on hover.
Check out and keep me posted in the comments below.
I want to create a navbar like here: http://www.devoncrawford.io/
I couldn't figure it out how to interact with css elements through my ts code.
Maybe you can give me a tip, where I could research a bit more.
I would also love to get this autoscrollbutoon and just be able to interact with my css stuff.
I found a lot of jQuery stuff, but I am not familiar with it. Is that working in angular and should I learn it?
Thanks for your time. Sorry, it is a little bit general question, but I hope you can give me some advice
Check the below article which explain how to create sticky navbar using angular with good explanation and example
Ref:https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3
Example:https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header
I would use an windows eventListener to look at the scroll movement.
window.addEventListener('scroll', this.scroll);
After the scroll hits a number of vertical pixels, you could change the navbar background-color from 'transparent' to the color you want. (in the examples case '#fff'. You could make two different classes with the different background-colors and append or remove the css class.
Hope this helps.
I'am using Bootstrap 4 in React.js project.
I have two elements - navbar and alert implemented from Bootstrap4.
Since I've set position:fixed in both (overrided css) both of them become semi-transparent. I've never used transparency for neither of them and haven't use rgba color codes for them. It just happened by itself ... why and where I should seek ?
I found the answer by myself. Post it here in hope to be helpful for some other newbie :)
So:
When you're using Bootstrap4 read documentation carefully ;)
When you want fixed top/bottom navbar WITHOUT transparency instead of overriding .navbar class in your's csses by adding position:fixed apply ready-to-use Bootstrap class fixed-top/fixed-bottom/sticky-top applying them to your html/jsx Bootstrap element
Docs: https://getbootstrap.com/docs/4.0/components/navbar/#placement
I would like to have Google Material shadows on my SVG elements.
I am using Snap SVG and I have found a way to use shadow filters on my elements:
element.attr({
filter : s.filter(Snap.filter.shadow(0, 19, 38, 'black', 1))
});
What I can't find is the settings I have to input for each of the Material shadows.
What I tried:
I found several codepens such as this which have material shadows using CSS, and I tried to take the box-shadow settings from them and use the same settings, but mine just got much bigger.
From what I researched, box-shadow take the settings in pixels, and according to the Snap SVG docs, so does Snap SVG.
I can't seem to understand why both take the setting in pixels, but Snap SVG is just much more.
-- I also tried some trial and error, but I can't imagine how long it will take to find out all the different settings for all the different Material Shadows.
So to clarify things a little, what I really would like to know is the Snap SVG shadow filter setting, for each of the Google Material Shadow.
The reason is that I want a button that cycles between the shadows.
Thank you for your help.
EDIT
Actually, it looks like I was doing the opacity wrong.
My filter now resembles the Material shadow much better.
However, I notice that the codepens that use CSS for Material shadows use multiple box-shadows. How can I do that with Snap SVG? (Have multiple shadows)
SOLUTION
So what I did was to define a couple of defs in the SVG.
I found an SVG with Material Shadows which helped me define my defs for each level of shadow.
I then did as #Ian suggested and used the defs with Snap SVG.
I'm not quite sure from your description why you still can't use the css style you have found that you like. No reason you can't switch styles by toggling a button unless I'm misunderstanding something.
Its a bit fiddly doing complex filters in Snap, but if you find one just from regular svg markup, you can use it, by either 'parsing' the svg markup, or using some thats already existing in a defs statement for example.
E.g you could go to a page like this... filter codepen Grab the created markup, and then put it in a defs statement or parse('markup') it.
Then you can use it like...
element.attr({ filter: Snap('#myFilterId') });
eg jsfiddle created using the above codepen and just pasted into a 'defs' statement and used with above line.
Some Context
I am playing around with Angular-material and trying to see how well it plays with bootstrap. The Angular-material start project shows off some of the cool things it can do, but it seems like it seems like Angular Material still requires a lot of custom CSS for my non-designer skills. Ergo, why I'm trying to see if it's a good idea to try to use bootstrap and angular-material together.
If this is a terrible idea, please let me know.
My Problem
The icons in the side panel of this codepen should be circles, but they are squares! I can see the border-radius property with Chrome debugger tools but I cannot figure out why it is not being honored.
To add to the mystery, when you click one of the items then all of the icons below that do in fact become circles for a moment.
Can someone with more CSS experience than myself tell me what's going on or how I might debug this more completely?
And any feedback about using angular-material + bootstrap together is also much appreciated.
I also experienced this problem using angular, where the border-radius is not honored, when trying to style an element that is part of a ng-repeat. I found that if you apply the style to the child element of the ng-repeat instead it will honor the border-radius property. This is more of a workaround than a solution, as I also don't understand why this happens.
So in your case you could do:
.avatar svg {
border-radius: 50%;
}