Srujan Sagar

Background colour isn’t taking full width

I’m working on my portfolio which has three section tags. I’ve declared a background colour for the whole body, however, I want different colours to take full width for the 2nd & 3rd section tags — just like body background colour. While I did try to achieve that using the below code, the background colour for both the section tags isn’t taking full page width. Any help on this would be appreciated. HTML

Srujan Sagar
Hello! I'm an India-based self-taught FrontEnd Developer. 

I have a diverse set of skills, ranging from design, to HTML + CSS + Javascript, all the way to Django.
 

  




Hi there!
Hi there!

body < /*background: url('../images/background_img.jp');*/ background-color: #FFFAFB; text-align: center; font-family: 'Lato', sans-serif; >header < font-family: 'Pacifico', sans-serif; letter-spacing: 3px; font-size: 90px; padding-top: 10px; color: #A63A50; >.main-content < font-size: 1.3em; font-family: 'Raleway', sans-serif; color: #CA7989; width: 500px; margin: 0 auto; padding-top: 25px; >.logo < border-radius: 50%; border: 1px solid #CA7989; margin: 30px 0 0 0; >.social-links < margin: 25px 30px 0 0; >a < text-decoration: none; color: #CA7989; >li < list-style-type: none; display: inline; margin: 0 10px 0 0; >.line < max-width: 550px; margin: 0 auto; border-top: 1px solid #CA7989; >nav a:hover < color: #A63A50; background: #F5E6E6; >.second-content < background:#ebebeb; width: 100%; height: 465px; >.third-content

5 Answers 5

on the body, it’s the default margin.

Maybe remove margin and padding from the body :

Just add margin: 0; to body to remove the default margin.

then try removing margin and padding of your body and that should do it!

Источник

Background Colour width when hovering over text

I’m pretty stuck right now, I’m working on a site and I have the height of the list on my navigation bar sorted but now I want to make the width bigger so when I hover on it the background colour covers a slightly bigger area instead of brushing up against the end of the text. I’ve tried padding it but all that seems to do is move the text over slightly and then center the text within that area. Image (Don’t have enough reputation to embed): https://i.stack.imgur.com/9GoIf.png This is the CSS I currently have for it. I would appreciate any help with this!

html < margin: 0; >body < padding: 0; margin: 0; border: 0; >.navigation < font-family: Arial; font-size: 16px; font-weight: lighter; background-color: #555; color: white; width: 100%; height: 72px; background-image: url("images/download.png"); >.navigation ul < list-style-type: none; text-decoration: none; >.navigation li < height: 100%; width: 80px; display: inline-block; padding-top: 25px; float: right; margin-right: 120px; >.navigation li a < text-decoration: none; color: white; >.navigation li a:hover

3 Answers 3

Is this what you are looking for.

We remove the width from the parent and make the links block elements with padding

.navigation li < display: inline-block; float: right; margin-right: 120px; >.navigation li a < text-decoration: none; color: white; display: block; padding: 26px 30px; >.navigation li a:hover

And making the li float right will mess up the order of your links consider floating the parent ul insted.

Источник

Invert CSS font-color depending on background-color

Is there a CSS property to invert the font-color depending on the background-color like this picture?

6 Answers 6

There is a CSS property called mix-blend-mode, but it’s not supported by IE. I recommend using pseudo elements. If you like to support IE6 and IE7 you can also use two DIVs instead of pseudo elements.

.inverted-bar < position: relative; >.inverted-bar:before, .inverted-bar:after < padding: 10px 0; text-indent: 10px; position: absolute; white-space: nowrap; overflow: hidden; content: attr(data-content); >.inverted-bar:before < background-color: aqua; color: red; width: 100%; >.inverted-bar:after

attr() is only supported for the «content» parameter. You wont be able to use it for something like background-color: attr(data-color); but as long as it’s content: attr(data-anything) you’ll be fine. For all the other use cases better resort to css variables.

This answer says to use mix-blend-mode but the included code doesn’t have that property set anywhere.

div < position:absolute; height:200px >/* A white bottom layer */ #whitebg < background: white; width:400px; z-index:1 >/* A black layer on top of the white bottom layer */ #blackbg < background: black; width:100px; z-index:2 >/* Some white text on top with blend-mode set to 'difference' */ span < position:absolute; font-family: Arial, Helvetica; font-size: 100px; mix-blend-mode: difference; color: white; z-index: 3 >/* A red DIV over the scene with the blend-mode set to 'screen' */ #makered

Beware, that using mix-blend-mode may break your CSS transitions, like smooth opacity, because if any child element has mix-blend-mode style, the opacity is not animated smoothly on GPU (at least as of today on Chrome).

I know this is an old question, but I wanted to add another solution I’ve been using before I learned of mix-blend-mode .

The idea is to have the information duplicated in two layers, a back and a front, where the back and front have different background and text colors. These are identical in dimension and text. In between, I use a clipping box div to crop the front (top) layer to the desired width, showing the front layer where it is not clipped, and revealing the back layer outside of the clipping window.

This is similar to the «Two div» solution in the accepted answer, but uses the extra clipping box. What’s advantageous in this solution is the easy centering of text if desired, and simple, direct selection of the colors.

// Set *front* width to *back* width // Do this after DOM is ready $('#front').width($('#back').width()) // Based upon an event that determines a content change // you can set the text as in the below example percent_complete = 45 // obtain this value from somewhere; 45 is just a test $('#front').text(percent_complete.toString() + '% complete') $('#back span').text($('#front').text()) bb_width = (percent_complete * $('#back').width())/100 $('#boundbox').css('width', bb_width.toString())

.progress < display: block; margin: 0; /* Choose desired padding/height in coordination with font size */ padding: 10px; height: 28px; >#back < position: relative; /* Choose a border to your liking, or none */ border: 1px solid lightgray; /* Choose your desired text attributes */ text-align: center; font-family: Calibri, "Sans Serif"; font-size: 16pt; /* Set the desired width of the whole progress bar */ width: 75%; /* Choose the desired background and text color */ background-color: white; color: black; >#front < position: absolute; left: 0; top: 0; /* Choose the desired background and text colors */ background-color: navy; color: white; >#boundbox

I use jQuery to programmatically set the percent progress and make sure that the width of the front matches that of the back, and that they have identical text. This can also easily be done with pure Javascript.

I tested this in Chrome, Firefox, Microsoft Edge, and IE version 11.

Источник

Урок 8. Как установить цвет текста и фон элемента в CSS?

Одна из самых распространённых задач при редактировании текста и блоков в HTML и CSS. С ней может столкнуться не только верстальщик, но и любой контент-менеджер, который редактирует содержимое сайта. Для решения данного вопроса используется всего два свойства: color — цвет текста, background — работа с фоном, цвет или изображение.

Работа со цветом теста в CSS

color — это свойство, которое нужно для указания цвета только для текста. Цвет можно указать как в формате HTML HEX кода, так в формате RGB (Red Green Blue). Коды цвета можно выбрать либо в графических программах, например, Photoshop, либо в онлайн

Теперь применяем свойство:

a color: #0085сс; // ссылки приобретут светло-синий цвет 
>

Пример указания цвета для текста в элементе с идентификатором content:

.content color: #444; // тёмно-серый текст в элементе с классом content 
>

Почему именно такой пример: указание цвета для ссылки и для текста — это разные вещи. Запомните. Ну и от себя рекомендую делать цвет текста и ссылки разного цвета.

Работа с фоном в CSS

background — это свойство, которое позволяет работать с фоном изображения: устанавливать цвет фона, устанавливать в качестве фона изображение (форматы jpg, gif, png), изменять положение фона и другие параметры, которые описаны ниже.

background-color — это свойство используется только для установки цвета фона. Принимает только код цвета. Цвет можно указать в формате RGB (Red Green Blue), либо в формате HTML HEX кода.

.block background-color: #fbb5b5; // установим пастельный алый цвет для фона 
>

Лучшие примеры цветов для фона (современные дизайн-модели: Flat Design и др):

background-image — это свойство, которое используется для установки какого-либо изображения в качестве фона в элементе. Для указания изображения достаточно параметра url и пути к изображению относительно файла с css-стилями.

#back background-image: url("images/fon.jpg"); 
>

background-repeat — может использоваться только в том случае, когда выше было указано свойство background-image. Данное свойство устанавливает правило повтора изображения. По умолчанию, изображение повторяется по оси X и по оси Y до границ элемента (если фон меньше элемента). В свойстве можно указать настройку, чтобы изображения повторялось только по оси X — repeat-x (по горизонтали), только по Y — repeat-y (по вертикали) или вообще не повторялось вообще — no-repeat.

#content background-image: url("background.jpg"); 
background-repeat: repeat-x; /* изображение будет повторяться только по горизонтали до границ блока */ 
>

background-attachment — фиксирует фон в одном положении, то есть будет изображение прокручиваться вместе с содержимым блока или останется фиксированным. По умолчанию стоит значение scroll, что не фиксирует положение фона.

#content background-image: url("background.jpg"); 
background-repeat: repeat-x; /* изображение будет повторяться лишь по горизонтали */ 
background-attachment: fixed; /* закреплено в расположении */ 
>

background-position — свойство, которое задаёт расположение фона в элементе. Задаётся два значения: расположение по горизонтали и затем по вертикали. Задаётся либо в цифровом (пиксели и проценты), либо в буквенном варианте (left, center, right, top, bottom). Данное свойство нужно в том случае, когда изображение не повторяется (no-repeat), а фон нужно расположить в элементе определённым образом.

#block background-position: left center; /* по горизонтали - по левой стороне, по высоте - посередине */ 
>

В комментарии думаю всё понятно)
Пример написания цифирного значения:

#keys background-position: 109px 57px; /* отступ слева 109px, сверху 57px */ 
>

Тут думаю тоже всё должно быть понятно.
Много свойств? Смотрим как писать сокращённо.

В итоге. Сокращённая запись background в CSS

Можно использовать сокращённую запись, где все параметры будут указаны в строчку:

background: color image repeat attachment position;

Внимание! Порядок важен. Указывая значения, следите за последовательностью их расположения как в примере.

О плюсах. Подобная запись сокращает время загрузки страницы и рендеринг браузером. Пожалейте посетителей, записывайте лучше таким образом, если, конечно, Вам нужно несколько свойств.
Да, пропустить какое-либо свойство, в случае отсутствия потребности в нём, можно! Просто продолжаете дальше указывать значения дальше по списку.

.block background: #f1f1f1 url("background.jpg") repeat-x scroll 100px 125px; 
>

Пример работы фонов background в CSS

Код примера. Результат работы и исходники можете посмотреть по ссылке ниже.

В случае с фоновым изображением лучше указывать размеры блока, так как иначе он примет размер согласно содержимому.
Демонстрация Скачать исходники
Спасибо за внимание!

Источник

Set background image for font color?

Is there any way I can change the red to an image? Like url(images/text-bg.png); ? I want to put a texture on my text and decided that I would just make the text «color» an image, but I’m not sure if this can be done with CSS.

I’m trying to think if there would be a way to do this using opacity; but I don’t think there is. developer.mozilla.org/en/CSS_Reference Look around there at text and font styles available and see if there is anything to try and get the effect you’re looking for without using an image.

Okay, the «dupe» links back to here. Further more, I have a «minimal understanding of the problem being solved.» I did not know, at the time, if this was possible, but I find there very far from off-topic. Since there is no regular CSS syntax for a background-image for text, I asked it here. Once again, I really do not think this deserves to be labeled as «off-topic.»

5 Answers 5

it is possible, take a look at this pen here

Use this on parent of text:

 background-image: url(url); background-clip: text; -webkit-background-clip: text; color: transparent; 

Yes it’s possible using svg , you can embed over one and background image over another , later apply z-index to . You can use Vector applications like illustrator to create the svg the way you want.

   html  
  Text 
   

This works perfectly fine for me

-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-image: url(your-image.jpg); 

This is not possible, not even with CSS3. Here’s an interesting article on text effects you can use with CSS3.

Another option is to use a custom font which suites your needs.

This site has an amazing amount of free open-source fonts in every format needed to support all browsers, it even gives you a nice demo file to demonstrate how to implement it in CSS. This is compatible with CSS2.1 as well, making it IE7+ compatible.

Источник