Posts by hugocsl • 65,517 points
1,996 posts
-
1
votes2
answers200
viewsA: TV style information bar (similar to <Marquee>tag)
As you did not put more details in the question follows a simple model that can serve you. Basically you need to create a "container" with overflow:hidden and do the animation with @keyframes .txt {…
-
1
votes1
answer35
viewsA: Problem with my client using jquery
Happens exactly as @bfavaretto said. If the função depends on the jQuery to execute she has to come after the indexation of it. So first you call jQuery and then the function that depends on it. See…
-
1
votes1
answer4297
viewsA: Problems with miniature link formatting
Apparently you are having trouble with the tags that the Debugger accused: og:url <meta property="og:url" content="http://www.meusite.com.br/ola-mundo"> og:title <property="og:title"> It…
-
1
votes1
answer187
viewsA: Scroll based loading bar
Here’s an example made with pure JS. I think it’s exactly what you need. And it’s pretty easy to customize etc. window.onscroll = function() {myFunction()}; function myFunction() { var winScroll =…
-
1
votes4
answers1464
viewsA: Bootstrap how to print table background colors?
I know the question is a little old, but I’ll give you a solution and anyway stay there as a record. By default the printers do not print anything in CSS as background, either image or color To…
bootstrap-3answered hugocsl 65,517 -
1
votes1
answer195
viewsA: navbar bootstrap with error
No code can’t help you much. But your mistake is in that tag <div class="navbar-collapse header celm collapse in" id="bs-example-navbar-collapse-1" style="z-index: 9999;" aria-expanded="true">…
-
4
votes2
answers471
viewsA: How to line break a PHP string within a div
There are two ways to do this. With word-wrap:break-word or with word-break: break-all The first throws the word to a new line. The second word continues on the same line and only breaks down when…
-
2
votes2
answers109
viewsA: Placeholder color does not change when mouse is over it in another theme
Victor I can’t explain exactly what happened, but your problem is in this "concatenation" of classes: .escuro #myInput:hover:-ms-input-placeholder, .escuro #myInput:hover::-ms-input-placeholder,…
-
0
votes2
answers62
viewsA: js ul lis appearing a post a
Carlos as requested in the comment follows an option doing only with CSS. If you want to increase the duration of the animation just increase the value here animation-duration:4s left commented in…
-
0
votes1
answer804
viewsA: Mobile CSS image size resolution - Increase height
Vitor you are putting the height in the wrong place. The correct would be to put straight into the image. Only that it will get "deformed" kind splashed pq vc will only increase the height and not…
-
1
votes1
answer95
viewsA: Loading of images in different resolutions
1 - If you are using Bootstrap with the default Grid you theoretically would need the images in these resolutions. Here is the official documentation: https://getbootstrap.com/docs/4.0/layout/grid/…
-
1
votes1
answer123
viewsA: Change CSS in element that contains certain text
I don’t see why use jQuery to do this if only with CSS you would solve. But that way you get what you want using jQuery. Option 1 $(window).resize(function(){ if ($('body').width() <= 320 ){…
-
2
votes1
answer1050
viewsA: Grid Bootstrap System: Can . Row inside . col?
Yes you can do it this way. There is even an example of this in the official documentation as you can see here: https://getbootstrap.com/docs/4.0/layout/grid/#nesting <div class="row"> <div…
-
0
votes1
answer402
viewsA: Block landscape mode, via Css, on mobile display
Thiago think that block completely vc can only with Javascript. But you can treat CSS this way for example <meta http-equiv="ScreenOrientation" content="autoRotate:disabled"> And create a…
-
0
votes1
answer1530
viewsA: PSEUDO ELEMENT, CONTENT (IMG) AND BACKGROUND TOGETHER
Your question got a little confused, but let’s go in pieces. Yes it is possible to do everything with one class and one ::after, guy #minha_classe and #minha_classe::after According to the tag…
-
3
votes2
answers76
viewsA: Button with different format with CSS
Kirito I tell you to do with linear-gradient, so the corner is transparent and even the background feel an image you can see without problems. body { background-image:…
-
0
votes1
answer36
viewsA: Is it possible to recreate this gradient effect only with html and css?
Elender is possible yes. I used pseudo element ::after and box-shadow to make: p > span { background-color: peachpuff; display: inline-block; height: 1.25rem; vertical-align: middle; position:…
-
1
votes2
answers429
viewsA: Remove CSS image links in @media print
Victor this will solve your problem. That rule will catch the term jpg, png or gif inside the link and will put content as empty. So if there are jpg characters in the link etc it will apply the…
-
0
votes2
answers113
viewsA: Action using select
I will give my suggestion, without having to create <script> but putting right into the <select> OBS: I put the first option of <select> as "Select", because if already enter a…
-
1
votes1
answer747
viewsA: Adjust list of products in Woocommerce, to align correctly
James most likely his Grid is based on Floats so he is breaking. To sum up roughly, when the elements don’t have the same height (in your case when each product has a text size) the fitting of the…
-
2
votes2
answers627
viewsA: Effect on css image
I made an example using the pseudo class ::after, so you have no problem when doing the effect on the element in which your content is inside. To create this tilt I used the transform:skew and I…
-
2
votes1
answer647
viewsA: How to show and hide element according to scroll?
My dear is missing a "#" in your script More precisely here: if(scroll < 146 ) $("img-logo-fixed") lacked the # of ID Watch it work right on this snippet, just added the # as diti and stayed…
-
1
votes2
answers514
viewsA: Disable calendar in mobile date field
Completing. To remove the arrow that opens the Datapicker and Removing the adjustment arrows "step by step" you can use this code. Within the @media vc puts the minimum screen value to apply the…
-
1
votes2
answers408
viewsA: Search result open in new tab
I don’t know if it helps you but you can do it like this: You have to figure out a way to get what’s typed inside the input name="query" and place at the end of the link query= <input…
-
0
votes11
answers97880
viewsA: Center image vertically within a div
I believe that with display:grid be the easy way! I left the comments in CSS OBS: Works from IE10 forward! https://www.w3.org/TR/css-grid-1/ html, body { width: 100%; height: 100%; margin: 0; }…
-
1
votes5
answers1015
viewsA: Line with image in the middle
You can do just with <hr> yes! Even works until IE (at least in IE11 works) See below the example. The technique uses the image as the background of <hr> and with the linear-gradient I…
-
2
votes1
answer49
viewsQ: A . CSS for "Above the Fold" and another . CSS for "Below the fold" - Is it worth it?
In terms of performance and maintainability it would be interesting to have 2 files css on the page, one for the content that appears before the fold and one for the content that appears after the…
-
1
votes1
answer169
viewsA: description call (HOVER)
Wagner will have to go in stages. First if you’re using :target to call the description would not have as the :hover work... then I replace the :target for :hover in the example. Another thing. you…
-
3
votes1
answer307
viewsA: Commentary/legend in table rows
EDIT: Rereading the question I understood that you want the effect only on the table line <tr>. Then follow two ways of doing following the idea of the answer already given. tr { position:…
-
2
votes0
answers153
viewsQ: What is the difference between "Instant Apps" and "Progressive Web Apps" (PWA)
I’ve heard a lot about Instant Apps and Progressive Web Apps (PWA). I saw that they have some things in common, but as I am layman in the area I was left with some doubts. What would be in fact the…
-
3
votes2
answers11440
viewsA: How to position a button anywhere on the screen, in html
You forgot the " ; " after each of the styles you put in your CSS pos that didn’t work! Still there’s another problem, the way you made the button won’t stay 100% centered, because to center right…
-
1
votes1
answer1324
viewsA: Crop css image
Marcelo this happens because his image is not centered inside the div. If you center your image inside the div you can cut it equally on all sides! OBS: You don’t need clip:rect even because this…
-
4
votes1
answer1651
viewsA: Animation of texts with css
As you did not give many details of how wanted the animation I made two options. One with the phrase making one Fade-In and another with the phrase entering the screen over the other. The examples…
-
1
votes5
answers15911
viewsA: How to make a circle in CSS without Border-Radius 100%?
I’ll give an answer that may be considered a little awkward, but as no rules have been put in unless it is with CSS and without border-radius there goes one more suggestion (even if…
-
2
votes3
answers1419
viewsA: Change color of tabs by selecting tabs
From what I understand you want to leave the Tab that is active with a correct background color? To do this, simply style the native Bootstrap3 class .nav-tabs>li.active>a { background-color:…
-
3
votes6
answers8730
viewsA: How to create geometric shapes using CSS?
It is possible to do also with Clip-Path! As it was not cited in any of the other answers I will give a solution usingclip-path:polygon .trap, .skw, .skw-inc, .trap-inv { width: 160px; height: 80px;…
-
6
votes2
answers466
viewsA: box-shadow pick up the four corners of the image
What happens is that the first two values of the Box-Shadown represent the axis X and Y /* offset-x | offset-y | blur-radius | color */ box-shadow: -120px 120px 120px #000; So since you want the…
-
1
votes6
answers14122
viewsA: How to simulate a higher resolution screen to check the behavior of a website?
As some responses are half dated, as the browser is updated frequently, I will contribute an updated response on the latest versions of Chrome. You can easily simulate resolutions greater than 4K…
-
2
votes4
answers7004
viewsA: Create a triangle with CSS
Since it was not cited I will give a solution using the pseudo-element ::after With it you create an element within the div from the CSS, uses transform to rotate 45 graus and positions with…
-
8
votes18
answers139957
viewsA: What is the best way to center an element vertically and horizontally?
As the option using Grid Layout has not been cited in any of the 19 responses, I will leave some instructions on how to do using CSS3 Grid Layout. Link to the official documentation of Grid Layout…
-
1
votes2
answers100
viewsA: Scrolltop does not work after certain scrolling
As noted in the comment, and within what I understood of the question, I think this CSS example can help you if you don’t want to use jQuery etc. In this example the element is 100px do topo, and…
-
0
votes1
answer260
viewsA: animation on the main page
Luciana from what I understand you want an animation like Typewriter with a phrase before entering the correct website. I made this template only with CSS and I think it will serve you as an example…
-
6
votes2
answers1487
viewsA: Dynamic writing effect of text
The effect is called Typewriter Here’s a simple example with CSS only, each sentence character you want represents a animation:steps() as "Hello world!" has 10 characters you will need to steps(10)…
-
1
votes1
answer532
viewsA: Problem with background-image accessing from google browser Chrome on mobile
Ana most likely your problem is why you did not put a height with value on body and in the html Try to put it this way that should work in other browsers. OBS: I left some comments in the code. html…
-
1
votes2
answers1910
viewsA: Hide elements according to screen size
With the @media CSS you get it. Javascript is not necessary to solve this. I have left comments in the CSS code below for ease of understanding. The operation is simple: all menu items with the…
-
1
votes1
answer109
viewsA: smooth scrolling with pure javascript
Here is a simple example just with pure JS. There is no jQuery. Example Smooth internal scrolling with Anchors only. var smoothScroll = { move : function (old, des, actual) { easeInOutQuart =…
javascriptanswered hugocsl 65,517 -
0
votes1
answer213
viewsA: How to move an html label using css transitions
There are some details in your CSS, for example the selector to grab the label after the image should not be the > must be the + 'cause you want to catch the label brother of the image and not…
-
0
votes2
answers83
viewsA: Why does background-color only work with overflow:Hidden?
As @Diegosantos just talked of putting a height already solves, but that doesn’t explain why with the Overflow works and without fail. The explanation is that the overflow changes the context of the…
-
1
votes1
answer53
viewsA: Unwanted delay effect
Your problem is in this class in the file css.css It’s affecting some elements within your .gtco-nav * { transition: 0.5s !important; transition-timing-function: linear !important; } That one…
-
2
votes1
answer2534
viewsA: Background with gradient and undulations
There are two ways to do it, one with Clippath 100% with CSS, and one using SVG, but SVG can be straight into HTML like I did in the example. If you want you can use Base64 tb, but I think it’s not…