🎨 Dê vida ao seu layout com CSS Background! Você sabia que o CSS oferece diversas opções para personalizar o fundo das suas páginas e elementos? Aqui estão algumas propriedades que podem transformar seu design: 🔹 background-color: Escolha a cor perfeita para criar contraste ou harmonia no layout. 🔹 background-image: Adicione imagens incríveis para contar histórias visuais. Dica: use URLs otimizadas para performance! 🔹 background-size: Experimente valores como cover ou contain para ajustar suas imagens ao espaço disponível. 🔹 background-position: Defina exatamente onde sua imagem será exibida. Exemplo: center center para centralizar. 🔹 background-repeat: Controle a repetição. Que tal usar no-repeat para uma aparência mais limpa? 🔹 background-attachment: Torne seu fundo fixo com fixed para criar aquele efeito incrível de parallax!
Publicação de Pedro Rafael
Publicações mais relevantes
-
💻 Desenvolvedor Full Stack em Formação | 💊 Estudante de Farmácia | 💼 Analista de Faturamento na Área de Saúde | 🌍 Estudante de Esperanto
Aumentando a eficiência do design responsivo com o uso de REMs. Quando falamos de design responsivo, a tipografia fluida é essencial para garantir que o layout se adapte bem a diferentes telas. Um truque simples, mas poderoso, é definir o tamanho da fonte do elemento <html> para 62.5%. 💡 Por quê? Como a maioria dos navegadores configura a fonte padrão para 16px, ao usar 62.5% no <html>, cada 1rem passa a equivaler a 10px. Isso facilita o cálculo dos tamanhos de fonte e mantém a padronização. Exemplo de cálculo: 1.0rem = 10px 1.2rem = 12px 1.6rem = 16px 2.0rem = 20px Com essa abordagem, você simplifica a escalabilidade e torna o código mais intuitivo para ajustes futuros. 🔧 👨💻 Benefícios: Maior flexibilidade em diferentes dispositivos. Padronização da tipografia em todo o projeto. Mais fácil de manter e escalar seu design. Você já usou essa técnica em seus projetos? O que achou? Deixe suas impressões nos comentários! 💬 #Frontend #DesignResponsivo #CSS #WebDevelopment #Tipografia #REM #UXDesign #JavaScript #FullStackDeveloper #DicasDeProgramação #DesenvolvimentoWeb #HTML #React
-
Mais um projeto que desenvolvi uns anos atrás, dessa vez uma ferramenta bem útil para aqueles que trabalham com design gráfico. Uns 3 anos atrás, me deparei com uma tarefa de tratamento de imagem que o Photoshop não era capaz de realizar sem "gambiarras": alterar a matiz/saturação/valor de uma imagem para equiparar uma das cores a uma referência. Não estou falando da função "replace color", falo de alterar a imagem como um todo, sem recortar parte dela (massacrando degradês e sombras no processo). Pesquisei tutoriais e pasmem: sugeriam rabiscar com a cor em uma camada superior e ajustar manualmente as cores da camada inferior até parecer igual. Então desenvolvi uma ferramenta em javascript com interface feita no Material Design 3 (Material Web) que permite carregar uma imagem, selecionar uma de suas cores e uma cor de referência, e a partir disso calcular precisamente a transformação a ser aplicada a todos os pixels da imagem para equiparar ambas as cores. O resultado são artes com variações tonais preservadas e que podem ser utilizadas, por exemplo, para gerar versões alternativas de logomarcas monocromáticas em toda a paleta de cores da marca, mantendo degradês e até mesmo transparências. O projeto está disponível no meu GitHub, com um link para testar online: https://lnkd.in/dpjm9MQw #html #css #javascript #materialdesign #design #desenvolvimento #ti
-
-
box-sizing no CSS, conhece essa propriedade? https://lnkd.in/daGvpDWQ A propriedade box-sizing: border-box; no CSS é utilizada para incluir o padding e a borda na largura e altura total de um elemento. Isso significa que, quando você define a largura de um elemento como 100 pixels e aplica essa propriedade, o tamanho total do elemento será de 100 pixels, incluindo qualquer padding e borda que você adicionar. Antes da introdução dessa propriedade, o modelo de caixa padrão em navegadores era o "content-box", onde a largura e altura especificadas de um elemento não incluíam padding ou borda. Isso podia levar a problemas de dimensionamento e layout, especialmente quando se trabalhava com elementos flexíveis ou responsivos. Ao usar box-sizing: border-box;, você obtém os seguintes benefícios: Maior previsibilidade de dimensionamento: A largura e altura de um elemento são consistentes, independentemente da presença de padding ou borda. Isso facilita o dimensionamento e o posicionamento de elementos na página. Layouts mais fáceis: É mais fácil criar layouts consistentes e responsivos, pois você não precisa se preocupar em compensar o padding e a borda ao definir as dimensões dos elementos. Menos código CSS: Você precisa escrever menos código CSS para alcançar o mesmo resultado, pois não precisa se preocupar em ajustar as larguras e alturas para compensar o padding e a borda. No entanto, existem algumas desvantagens em usar box-sizing: border-box;: Incompatibilidade com versões antigas de navegadores: Essa propriedade não era suportada por versões antigas de alguns navegadores, o que pode levar a problemas de layout em navegadores mais antigos. Possibilidade de problemas de layout com margens: Se você não tomar cuidado, a utilização de box-sizing: border-box; pode levar a problemas de layout com margens, pois as margens são calculadas com base na largura e altura do conteúdo do elemento, não na largura e altura total do elemento. Em geral, os benefícios de usar box-sizing: border-box; superam as desvantagens. Essa propriedade é uma ótima maneira de melhorar a previsibilidade de dimensionamento, facilitar a criação de layouts e reduzir a quantidade de código CSS necessário. Recomendações: É recomendável usar box-sizing: border-box; como valor padrão para todos os elementos na sua base de código CSS. Se você precisar usar o modelo de caixa "content-box" para um elemento específico, você pode definir a propriedade box-sizing desse elemento para content-box. Esteja ciente de que a utilização de box-sizing: border-box; pode levar a problemas de layout com margens em versões antigas de alguns navegadores. Espero que esta explicação tenha sido útil!
-
🏆6° lugar - Imersão Dev da Alura com Google Gemini | Front-end Developer | Javascript | HTML | CSS
💡 Você sabia? Enquanto revisava a propriedade display em CSS, me deparei com uma curiosidade interessante sobre replaced elements. 💻 👀 Minha dúvida foi: por que uma img, que é um elemento inline, aceita as propriedades do box model (largura, altura, margens, etc.)? 🤔 Afinal, se é inline, não deveria se comportar diferente? 🔍 Eis o que descobri: alguns elementos, como img, video e iframe, são o que chamamos de replaced elements (ou "elementos substituídos"). Na prática, isso quer dizer que o conteúdo e a aparência deles vêm de uma fonte externa ao próprio HTML (como um arquivo de imagem ou vídeo). Por isso, o navegador trata esses elementos de forma especial, e eles acabam tendo um comportamento mais parecido com blocos, recebendo propriedades do box model, mesmo sendo inline! 🖼️ Isso ajuda a garantir que as imagens, por exemplo, possam ser facilmente redimensionadas e posicionadas sem precisar de ajustes complexos. 🧩 Entender esse conceito pode parecer detalhe, mas ele é super útil na prática! Saber como o navegador lida com esses elementos ajuda a construir layouts mais consistentes e evita surpresas com ajustes de tamanho e espaçamento. #CSS #Frontend #DesenvolvimentoWeb #ReplacedElements #DicaDeCSS
-
Olá, rede! Você conhece todos os meios de deixar um site responsivo? Se sim, qual você mais utiliza? Aqui vão alguns exemplos de como executar a responsividade. "Responsivizar" um site com CSS envolve ajustar o layout para que ele fique bem em telas de diferentes tamanhos, como desktops, tablets e celulares. Aqui vão alguns exemplos práticos: 1. Uso de Medias Queries; Uma media query consiste de um media type e pelo menos uma expressão que limita o escopo das folhas de estilo usando media features, tal como largura, altura e cor. Media queries, adicionadas no CSS3, deixam a apresentação do conteúdo adaptado a uma gama especifica de dispositivos não precisando mudar o conteúdo em si. 2. Uso de Unidades Flexíveis (vw, vh, %); As unidades vh e vw significam viewport, sendo a primeira para altura e a segunda para largura. Isso significa que elas utilizam o tamanho total da viewport (tamanho do nosso dispositivo), ou seja, uma altura de 100vh corresponde a 100% da página total, do nosso corpo do documento (body). Essas propriedades podem ser ajustadas de acordo com a necessidade. 3. Grid Flexível com Flexbox; Organiza os elementos dentro de containers de forma flexível. Essa flexibilidade se caracteriza pela capacidade de alterar a largura e a altura dos itens conforme a necessidade para que o layout se adeque a qualquer tela. 4. Uso do CSS Grid; CSS Grid Layout é uma poderosa especificação que se for combinada com outras partes do CSS, tal como flexbox, possibilita a criação de layouts que até então eram impossíveis de serem criados com CSS. Tudo começa com a criação de um grid dentro de um grid container.
-
-
💎 Guia Rápido - Diferença entre padding, border e margin 💎 – ➜ Padding (preenchimento): são os espaçamentos estruturais internos do componente ➜ Border (borda): é o contorno que o componente pode ter ou não. Vai depender da identidade visual ➜ Margin (margem): são os espaços entre os componentes, formam a composição da tela – Por que é importante que o designer conheça esses recursos de CSS? Porque essas medidas são estruturantes tanto no código, como no planejamento visual das interfaces. Por mais que, no dia-a-dia, os designers não usem esses termos, levá-los em consideração é fundamental. Por exemplo, no desenho de uma tela, determinar e padronizar os espaçamentos verticais (distância entre separadores, cards, botões, formulários, textos etc) é determinante para a qualidade visual e impacto na arquitetura de informação. 🧠 IMPORTANTE: Não acredito na ideia de que todo designer precisa saber codar. Alguns sabem porque gostam ou tiveram experiências prévias e decidiram aprofundar. Mas, acredito que, conhecer o básico da comunicação entre a interface e o código ajuda a elevar o nível e o entendimento sistêmico da entrega. – Nos slides abaixo, deixei alguns exemplos rápidos e práticos 😉
-
Construí um site utilizando apenas HTML e técnicas de edição de imagens, sem CSS. Foi uma experiência que testou minha criatividade e conhecimento técnico, exigindo soluções alternativas para layout e design. Cada detalhe foi pensado para manter o visual atraente e funcional, mesmo sem as ferramentas de estilo tradicionais. Confira o resultado no vídeo! 🚀 #DesenvolvimentoWeb #HTML #SemCSS #Inovação #DesafioTécnico #EstudanteDeTI #Proatividade
-
Estudante Bacharelado em Engenharia de Software | Suporte T.I | Html | Css | Javascript | Php
Mais um site saindo do papel. Aqui estou no processo de prototipação usando photoshop para produzir o layout para me ajudar na hora de codar para saber o que tenho que desenvolver e desenvolver com muito mais rapidez e qualidade. Esse processo ajuda no desenvolvimento da criação de cores, tipografia e outros elementos visuais que serão dispostos no site. Ainda estou testando a combinação de cores, tipografia e ajustando onde vai ficar cada seção. #Criacaodesites #sites #desenvolvimentoweb #html #css #javascript #php
-
-
Durante meus estudos sobre responsividade, percebi que há diversas unidades em CSS que podem ser usadas nos projetos, cada uma com seu próprio desempenho, dependendo da proposta do projeto. Vamos explorar algumas dessas unidades e entender como elas podem melhorar nossos layouts. Unidades Absolutas: Medidas fixas ideais para situações onde se deseja um controle preciso e consistente sobre as dimensões, independentemente do ambiente em que o conteúdo é visualizado. - px (pixels): A unidade mais utilizada, representa um ponto na tela. - cm (centímetros): Medida física, principalmente usada para impressão. - mm (milímetros): Outra medida física usada para impressão. - in (polegadas): Medida física, igual a 2.54 cm. - pt (pontos): Unidade tipográfica, igual a 1/72 de uma polegada. - pc (paicas): Unidade tipográfica, igual a 12 pontos. Unidades Relativas As unidades relativas são dimensionadas com base em outros valores como o tamanho da fonte do elemento pai ou as dimensões da viewport. Isso permite que elas se ajustem dinamicamente ao contexto em que são usadas, tornando-as ideais para layouts responsivos e flexíveis. - em: Relativo ao tamanho da fonte do elemento pai. (Útil para criar layouts que se ajustam dinamicamente ao tamanho da fonte.) - rem (root em): Relativo ao tamanho da fonte do elemento raiz (<html>).(Facilita a criação de layouts consistentes em toda a página.) - % (porcentagem): Relativo ao tamanho do elemento pai. (Ideal para dimensionamento fluido de elementos.) - vw (viewport width): Relativo à largura da viewport. (Ótimo para ajustar elementos à largura da tela.) - vh (viewport height): Relativo à altura da viewport. (Útil para ajustar elementos à altura da tela.) - vmin: Relativo ao menor valor entre a largura e a altura da viewport. (Usado para manter proporções em layouts responsivos.) - vmax: Relativo ao maior valor entre a largura e a altura da viewport. (Usado para expandir elementos conforme a tela cresce.) #WebDevelopment #CSS #Frontend #ResponsiveDesign #TechTips #DeveloperLife #LinkedInLearning
-
-
🔥 Entendendo o Alinhamento Seguro e Inseguro no CSS Flexbox O Flexbox é, sem dúvidas, uma das principais formas de criar layouts responsivos na web. Um ponto muito interessante, que descobri há pouco tempo, é o conceito de alinhamento seguro/inseguro. Esse conceito impacta diretamente na estabilidade do layout e na acessibilidade do conteúdo. 🔹 Alinhamento Seguro (safe alignment): Evita o overflow de conteúdo que pode tornar itens inacessíveis (ou seja, fora da tela). Se houver risco de overflow, o navegador ajusta o alinhamento para manter o conteúdo visível, geralmente utilizando o scroll. Utilizado para garantir acessibilidade, especialmente em telas menores ou em layouts dinâmicos. 🔹 Alinhamento Inseguro (unsafe alignment): Permite que o alinhamento especificado cause overflow, podendo cortar o acesso a alguns itens. Prioriza sempre o alinhamento e não a acessibilidade do conteúdo. Útil em cenários de layout controlados, onde a prioridade é o design, tendo a garantia de que as informações importantes permanecerão visíveis. A escolha entre alinhamento seguro e inseguro no CSS Flexbox equilibra design e acessibilidade do conteúdo. A maioria dos navegadores modernos suportam os alinhamentos safe e unsafe, mas o suporte global ainda está em torno de 75%. 💡 Este post foi criado com base no artigo “Safe/unsafe alignment in CSS Flexbox”. Para mais detalhes, trechos de código e exemplos visuais, confira a postagem completa nos links abaixo. Browser support: https://lnkd.in/d6WRPbAn Artigo completo: https://lnkd.in/d3m_n3td #css #flexbox #webdevelopment
-
