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.
Related
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'm trying to write a sliding menu similar to that with images here: https://chustynka.pl/
I've got already components that are changing in time (with arrows) the only thing left is animation. I added the classes and ids that will be useful but I don't know how to use css to animate them. Could you help?
https://codesandbox.io/s/00rnj29p60
Unfortunately it's not just CSS code you need. As you're going to animate the slides you have to do some more javascript code as well. For example you have to keep track of the direction of the slides. That is if you're pressing the left or right arrow. That, in turn, will decide which direction the slides will slide in/out.
There's a lot of approaches to doing this but it involves more coding in JS. =)
This is not a React slider I've made here but you can download/clone it from Github and take a look at the script for it. Maybe it will give you some idea of what you have to do.
https://github.com/weibenfalk/Slider-Carousel---Lightweight-in-Vanilla-JS-ES6-
I am building a site using Drupal 7 and have run into a CSS issue. I am trying to wrap everything on this registration page in the center and at the same time reduce the width of the drop down buttons. I believe I've narrowed the problem to my logintobaggan (drupal module) css sheet. But the button "widths" seem to be from the foundation.min.css (according to chrome elements). How would you guys approach this CSS problem? I am relatively new, so please don't be too harsh ;). Thanks!
http://medicaldoctorapps.com/user/register
I would get Firebug or similar in-browser development tool, select the element you are interested in seeing the CSS properties for, and then see exactly which rules are being applied or overridden. You can even modify the CSS right there in the tool until you get want you want.
From such a tool, I can see that the button widths are not explicitly defined, but are basically derived from the amount of padding (5px) around the text string inside the button.
The rules are defined starting on line 41 of this file:
http://medicaldoctorapps.com/sites/all/modules/logintoboggan/logintoboggan.css?mgqhxk
Think I know the answer to this one, but just thought there may be some genius out there whos know of a way to do this...
Basically I am making a site editor kind of thing and it would be amazingly handy if I could replicate the way Firebug and the Chrome console highlights elements when you hover over their code in the html/elements tabs of those inspectors...
Its not something I can do with background effects because that does not highlight the whole Div (the contents show above the highlight) and I don't think there is anyway of making a div overlay over the top of all the content but have it not block mouseovers on underlying elements...
Anyone any ideas? Is there any browser specific code that achieves this kind of thing?
In general, Firefox extensions are mostly JavaScript. Since Firebug is BSD licensed, you can browse its source code on its project site. Maybe you'll find the relevant code and get an idea how to solve your specific task.
You could add an outline in CSS on mouseover - that would highlight the element without changing its position, as outline does not effect layout. A box-shadow would also work similarly.
In fact, it looks to me like Firebug adds a dark bluish box-shadow to elements to highlight them.
I have no idea how to even start this question, but I was referred to Stack Overflow by a friend who basically told me that anything I need help with or to help others, I should come here. So I have a question for website designers and coders alike. (optional: have a google+ account for a visual aid)
If you go into Google+, you have all these cool features that seem advanced with code, but very basic in style. You hover over a button and it becomes animated like the in the games section. You have an image of the game in a div container I believe and it cycles through like its a gif or a timed sequence. At the bottom of the image, you see a small box from left to right, filled in with a different color, and has the name of the game on it. When you hover over said game a box begins to move from the bottom of the div to the top of the div completely covering up the image, but has more details in it. These details includes the description of the game and a button at the bottom that is a dark bluish that says play game, and when you hover over it, then it becomes a light blue like color.
Basically I want to create the same thing, but with different attributes. Same concept initially with the picture and the box with the name with a white border, but when you hover over it, then the background would be like a dark red with white text and a dark red button with a white border with the words view site and when you hover over it then it is like a light red.
I am making a portfolio website for my website designs and photoshop work. I think that this would be a great addition and I hope somebody or anyone can help me. I always give credit in my about pages if I didn't actually create something on my own.
Thank you for your time on reading this ridicuously long question, but I hope it relatively makes sense.
Your question makes sense and you can totally do it, personally I recommend learning HTML & CSS and creating a working demo - then hiring someone / finding someone to help build the features you want it to have. That way you have total control of the appearance, which I think is something that you're more interested about then coding the features ( you mention showcasing your design work ).
http://learn.shayhowe.com/html-css/terminology-syntax-intro/
Is a nice resource I saw today that might help you get started. In the future I think Stack Overflow is much more affective for specific questions related to specific issues, not something so broad as to code and design an entire web application.
Best of luck!