Красивая 3D модель старого компьютера с необычной начинкой внутри
Очень классный 3D объект старого компьютера с необычной начинкой в виде комнаты с подсветкой 😍
Можно крутить мышкой на 360 градусов, все работает это чудо работает на ThreeJS
Очень классный 3D объект старого компьютера с необычной начинкой в виде комнаты с подсветкой 😍
Можно крутить мышкой на 360 градусов, все работает это чудо работает на ThreeJS
Привет! Меня зовут Никита, я из Беларуси, Минск. Я заинтересован в веб-разработке. Неплохо знаю html и css, поверхостно знаю php и javascript. Недавно я заинтересовался в проекте для школы. Я хочу сделать сайт-соц.сеть для моей школы, в которой будут чаты для каждого класса, а также общешкольный чат для оповещения администрацией о важных мероприятиях всю школы сразу, через один чат.
Так как я совсем поверхостно знаю php и javascript мне нужна команда ребят (желательно моего возраста 13-15 лет), которые знают php и javascript лучше меня, и которые смогут помочь мне в разработке моего проекта. Мне понадобится помощь в создании системы регистрации и авторизации, а также в создании закрытых чатов. Ну и еще я ищу новые знакомства)
Пишите мне в тг @nikitkakovrov.
В жизни я многое повидал и перепробовал с десяток плагинов для Visual Studio: и мастхэв, и безделушки, и кривые , и косые.
А ведь качественные плагины частенько приходят на помощь при работе с кодом (особенно новичку). Именно поэтому я делюсь с вами 14-ю полезными расширениями в VS.
Непрерывно анализирует код, находит ошибки и проблемы в структуре кода. Что еще есть: безопасное изменение кодовой базы, мгновенный поиск и навигация по всему решению, соответствие стандартам оформления кода. MustHave-плагин для любого программиста.
Плагин позволяет быстро добавлять новые директории или файлы в проект. Просто нажмите Shift+F2, чтобы создать новый пустой файл или вложенную структуру из папок и файлов.
Плагин добавляет горизонтальную прокрутку с помощью колесика мыши в редактор кода Visual Studio. Для этого зажмите клавишу Shift.
Это аналог плагина EMMET, адаптированный под Visual Studio. Плагин позволяет быстро генерировать HTML-разметку, используя синтаксис CSS. Также в комплект входит генератор Lorem Ipsum, генератор Lorem Pixel, генератор PlaceHold.it.
Плагин добавляет дополнительную подсветку синтаксиса и поддержку сниппетов для многих языков программирования, включая Clojure, Go, Jade, Lua, Swift, Ruby и прочие.
Плагин позволяет более продуктивно работать с разметкой HTML (генерация, автозакрытие тегов). Отлично дополняет ранее объявленный ZenCoding.
Плагин добавляет такую функциональность как HTML/URL encoding, трансформация и сортировка выделенного участка текста, хеширование по различным алгоритмам.
Добавляет привлекательные иконки для различных типов файлов, которые не может распознать Visual Studio.
Плагин автоматически совмещает файлы в древовидную структуру, основываясь на имени файла. Также позволяет принудительно вкладывать файлы различных типов.
Плагин добавляет возможность оптимизации изображений прямо из Visual Studio. Оптимизировать можно JPEG (MozJPEG компрессия), PNG (Zopfli компрессия), обычные и анимированные GIF. Также можно сохранить изображение в виде строки base64 dataURI.
Плагин добавляет поддержку консолей различных типов, включая cmd, PowerShell, Bash и другие.
Плагин позволяет реализовывать связывание и минификацию файлов JavaScript, CSS, HTML.
Расширение позволяет компилировать файлы LESS, Sass Stylus, JSX, ES6 и CoffeeScript.
Плагин добавляет улучшения для CSS-редактора в Visual Studio, такие как превью обозначенного шрифта или картинки, подсказки для цветов, Drag 'n drop некоторых элементов и другие.
И ежу понятно, что сайт должен быть адаптивным под разные устройства пользователей. Это как магазин с обувкой, в котором для каждой модели говнодавов есть своя линейка размеров.
Если вы забьете болт на адаптивность, то будьте готовы к тому, что ваш сайт будет открываться криво у какого-нибудь Антона из Пензы с телефоном 5-летней давности с не самым актуальным разрешением.
Сегодня уже редко когда необходимо реализовывать разную вёрстку под разные экраны, поэтому уметь правильно адаптировать одни и те же элементы архиважно. О том, как это делать и на что в первую очередь нужно обращать внимание мы рассказали в этом посте.
Наш уютный канал в телеграме
Адаптивная вёрстка меняет дизайн страницы в зависимости от поведения пользователя, платформы, размера экрана и ориентации девайса и является неотъемлемой частью современной веб-разработки. Она позволяет существенно экономить и не отрисовывать новый дизайн для каждого разрешения, а менять размеры и расположение отдельных элементов.
Частичное решение: делаем всё гибким
Конечно, это не идеальный способ, но он устраняет большую часть проблем с адаптивной вёрсткой.
Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой вёрстки:
Весь дизайн — микс адаптивных слоев, картинок и, в некоторых местах, умной разметки. Создание адаптивных слоев — частая практика, чего нельзя сказать об адаптивных картинках. Однако если они вам нужны, обратите внимание на следующие техники:
- Creating Sliding Composite Images;
- Foreground Images That Scale With the Layout.
На первый взгляд может показаться, что все легко, но это не так. Взгляните на логотип:
Если уменьшить изображение целиком, надписи станут нечитаемыми. Поэтому, чтобы сохранить логотип, картинка поделена на две части: первая часть (иллюстрация) используется как фон, вторая (логотип) изменяет свои размеры пропорционально.
<h1 id="logo">
<a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer"/>
</a> </h1>
Элемент h1 содержит изображение в качестве фона, а картинка выровнена относительно фона контейнера (заголовка).
Гибкие изображения
Работа с картинками — одна из самых главных проблем при работе с адаптивной вёрсткой сайтов. Существует много способов для изменения размера изображений, и большинство из них довольно просто реализовать. Одно из решений — использование max-width в CSS:
img {max-width: 100%;}
Максимальная ширина изображения равняется 100% от ширины экрана или окна браузера, поэтому чем меньше ширина, тем меньше картинка. Обратите внимание, что max-width не поддерживается в IE, поэтому используйте width: 100%.
Представленный способ является неплохим вариантом создания адаптивных изображений, но, изменив только размер, мы оставим вес картинки прежним, из-за чего время загрузки на мобильных устройствах увеличится.
Ещё один способ: отзывчивые изображения
Вы можете использовать Picturefill для того чтобы сделать изображения чувствительными к изменениям размера экрана.
Для этого нужно скачать файл picturefill.js, а затем написать следующий код, внутри тега head:
<script src="picturefill.js"></script>
Чтобы подгрузка этого файла не влияла на загрузку сайта, рекомендуем добавить в тег script атрибут async. Это позволит сайту загружаться не дожидаясь файла picturefill.js. Однако, для того чтобы старые браузеры распознавали элементы picture, вам нужно добавить строку, document.createElement( "picture" ); перед первым тегом script.
Теперь вы можете использовать следующий код, для того чтобы указать браузеру какие изображения нужно отображать, в зависимости от размера окна:
<img
sizes="(min-width: 40em) 80vw, 100vw"
srcset="examples/images/medium.jpg 375w,
examples/images/large.jpg 480w,
examples/images/extralarge.jpg 768w"
alt="…">
Атрибут sizes используется для того, чтобы указать сколько места будет занимать изображение. Подробнее о значениях sizes и srcset здесь.
Для более явного контроля над изображениями существует элемент picture.
Интересная фича для iPhone
В iPhone и iPod touch есть особенность: дизайн, созданный для больших экранов, просто сожмется в браузере с маленьким разрешением без скролла или дополнительной мобильной вёрстки. Однако изображений и текста не будет видно:
Для решения данной проблемы используется тег meta:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Если initial-scale равно единице, ширина картинок становится равной ширине экрана.
Настраиваемая структура макета страницы
Для значительных изменений размера страницы может понадобиться изменить расположение элементов в целом. Это удобно делать через отдельный файл с адаптивной вёрсткой CSS или, что более эффективно, через CSS-медиазапрос. Проблем возникнуть не должно, т. к. большинство стилей останутся прежними, и изменятся только некоторые.
Например, у вас есть главный файл со стилями, который задает #wrapper, #content, #sidebar, #nav вместе с цветами, фоном и шрифтами. Если ваши главные стили делают макет слишком узким, коротким, широким или высоким, вы можете это определить и подключить новые стили.
style.css (основной):
/* Основные стили, которые будут унаследованы дочерней таблицей стилей */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Структурные элементы */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
mobile.css (дочерний):
#wrapper{
width: 90%;
}
#content{
width: 100%;
}
#sidebar-left{
width: 100%;
clear: both;
/* Дополнительные стили для нового дизайна */
border-top: 1px solid #ccc;
margin-top: 20px;
}
#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
На широком экране левая и правая боковые панели хорошо помещаются сбоку. На более узких экранах эти блоки расположены один под другим для большего удобства.
О других особенностях адаптивной верстки в CSS в статье о нетривиальных моментах разработки фронтэнда на CSS.
Адаптивная вёрстка с помощью медиазапросов CSS3
Рассмотрим, как можно использовать CSS3-медиазапросы для создания адаптивного дизайна. min-width задает минимальную ширину окна браузера или экрана, к которой будут применены определенные стили. Если какое-нибудь значение будет ниже min-width, то стили будут проигнорированы. max-width делает противоположное.
Пример:
@Media screen and (min-width: 600px) {Медиазапрос заработает только когда min-width будет больше или равна 600 px.
.hereIsMyClass {
width: 30%;
float: right;
}
}
@Media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both; font-size: 1.3em;
}
}
В этом случае класс (aClassforSmallscreens) будет работать при ширине экрана меньше или равной 600 px.
В то время как min-width и max-width могут быть применимы и к ширине экрана, и к ширине окна браузера, нам может понадобиться работать только с шириной устройства. Например, чтобы игнорировать браузеры, открытые в маленьком окне. Для этого можно использовать min-device-width и max-device-width:
@Media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}
@Media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}
Специально для iPad у медиазапросов есть свойство orientation, значениями которого могут быть либо landscape (горизонтальный), либо portrait (вертикальный):
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}
Также значения медиазапросов можно комбинировать:
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}
Этот код будет выполнен только для экранов или окон браузеров шириной от 800 до 1200 px.
Загрузить определенный лист со стилями для разных значений медиазапросов можно так:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css"/>
<link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css"/>
<link rel="stylesheet" media="print" href="print.css"/>
JavaScript
Если ваш браузер не поддерживает CSS3-медиазапросы, то замену стилей можно организовать с помощью jQuery:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(window).bind("resize", resizeWindow);
function resizeWindow(e){
var newWindowWidth = $(window).width();
// Если ширина меньше 600 px, используется таблица стилей для мобильного
if(newWindowWidth < 600){
$("link[rel=stylesheet]").attr({href : "mobile.css"});
} else if(newWindowWidth > 600){
// Если ширина больше 600 px, используется таблица стилей для десктопа
$("link[rel=stylesheet]").attr({href : "style.css"});
}
}
});
</script>
Низкий поклон всем тем, кто дочитал. Вы герои
Во многих сайтах и программах уже давным — давно используются такие элементы взаимодейтсвия пользователем, как «Слайдер», по сути это одна большая фотография которую можно переключать с помощью стрелочек или по нажатию на клавиши. Удобно когда на экране мало места, а показать множество фотографий нужно.
Как же создать вот такой слайдер?
Слайдер будет состоять из кусков кода HTML, CSS, JS, писать будем в Codepen.io но это только для удобства, можете перенести к себе на сайт, веб-приложение или в удобное для вас место.
План
1. Пишем структуру
2. Пишем стили
3. Пишем код
4. Заполняем объект
Пишем структуру
Наша структура будет состоять из объекта с классом «slider», внутри которого будет две кнопки для переключения, одна с индификатором «left», другая с «right». По середине будет большая фотография с индификатором «slider_image».
<div class="slider">
<button id="left">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
<img id="slider_image" src="">
<button id="right">
<img src="https://cdn-icons-png.flaticon.com/512/318/318476.png">
</button>
</div>
Пишем стили
Обнуляем лишние стили и пишем свои для наших элементов, контейнеров, кнопочек и фотографий.
body{
outline: none;
user-select: none;
font-size: 16px;
}
h1,p{
margin: 0;
padding: 0;
}
p{
margin-bottom: 10px;
}
a{
text-decoration: none;
background-color: rgb(50,50,50);
color: white;
padding: 5px 20px;
}
a:hover{
background-color: rgb(70,70,70);
}
.slider{
background-color: rgb(230,230,230);
height: 350px;
padding: 50px;
display: flex;
justify-content: center;
align-items: center;
}
.slider #slider_image{
background-color: rgb(50,50,50);
height: 400px;
min-width: 400px;
}
.slider button{
width: 70px;
height: 70px;
margin: 30px;
border: none;
border-radius: 100%;
padding: 0;
background: none;
}
.slider button img{
width: 50px;
height: 50px;
}
.slider #left img{
transform: rotate(180deg);
}
.slider button:hover{
opacity: 80%;
cursor: pointer;
}
Пишем скрипт
Для начала создадим объект, внутри которого будет хранить фотографии для слайдера, а именно ссылки на них для вписывания в будущем их в атрибут «src» на главной фотографии с индификатором «slider_image». После ищем все нужные элементы на странице через вставку «document.querySelector» и «document.getElementById». Создаем функции такие как «update()» которые будут отвечать за обновление главной фотографии, дальше будем писать ещё две функции для переключения главной фотографии. При старте страницы нужно вызвать функцию обновления, для подстраивания картинки при старте.
let slider_cfg = {
1: "https://cdn.pixabay.com/photo/2014/11/30/14/11/cat-551554_96...",
2: "https://cdn.pixabay.com/photo/2015/03/27/13/16/maine-coon-69...",
3: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
4: "https://cdn.pixabay.com/photo/2016/03/28/12/35/cat-1285634__...",
5: "https://cdn.pixabay.com/photo/2019/11/08/11/56/cat-4611189__...",
6: "https://cdn.pixabay.com/photo/2021/10/19/10/56/cat-6723256__...",
}
// varibles
let slider_image = document.getElementById('slider_image');
let left = document.getElementById('left');
let right = document.getElementById('right');
let sin = 1; //slider_image_number - sin
let size = Object.keys(slider_cfg).length;
let path = slider_cfg[sin];
// update slide
function update(){
path = slider_cfg[sin];
slider_image.setAttribute("src", path);
}
// toggle slides
left.onclick = function(){
if (sin > 1){
sin = sin - 1;
} else{
sin = 1;
}
update();
}
right.onclick = function(){
if (sin < size){
sin = sin + 1;
} else{
sin = size;
}
update();
}
// start
update();
Заполняем объект
Внутри объекта «slider_cfg», пишем номер картинки от 1 до бесконечности, он сам подстроит и сам определит количество, главное соблюдать индификатор, но можно написать и без индификатора по номеру и просто перебирать их. Ещё легче было бы написать в массиве. После указания номера картинки, после «:» пишем ссылку на картинку в скобочках « ' ' », не забудьте поставить «висячую запятую», то есть как на скриншоте, после каждой записи ставить запятую в конце, даже если запись окончена.
Итог
У нас есть рабочий и очень простенький слайдер для переключения фотографий, которые мы заполняем в объект. Все это работает без сбоев и хорошо.
Ссылка на код: https://codepen.io/Anton-Malezhik/pen/ZEJvbNQ
Привет лиге веб-дизайнеров!
Я учу фронтенд. Придумал сам себе тренировочный проект. Суть - агрегатор новостей. Смысл - собрать все сайты, которых нет в популярных агрегаторах. Целевая аудитория - региональные журналисты и продюсеры.
Суть вопроса.
Можете посоветовать, как улучшить интерфейс?
Я сам учу именно кодинг, на изучение правил и принципов дизайна времени нет. Прошу совета опытных людей.
Собственно, вот сам сайт: otovsydy.ru
Буду рад отзывам.
На "фуйня твой сайт" не обижусь, но желательно при этом немного написать, что сделать, чтобы был "не совсем фуйня".
Заранее спасибо!