Эксперименты Will O The Wisp

Страница: « 1 … 16 17 18 19 20 21 »

Сообщений 171 страница 180 из 203

Поделиться17314.03.23 10:23

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

И еще один дизайн где много чего двигается просто так

Озадачился панелью юзера слева тела форума (отключена при особом расширении экрана). Добавил эффект на название и аватарки. В целом полное баловство без ограничений. Да, так тоже можно.

Цитировать Сообщение 173

Поделиться17414.03.23 13:46

Автор: Automation Baby
Атаманша
Последний визит:
18.08.24 17:56
Уважение: +9027

#p181613,Will O The Wisp написал(а):

Озадачился панелью юзера слева тела форума (отключена при особом расширении экрана). Добавил эффект на название и аватарки. В целом полное баловство без ограничений. Да, так тоже можно.

На самом деле, у тебя интересные и свежие идеи в плане дизайна. Ими можно только вдохновляться!

Подпись автора

Отвечаю на вопросы вот здесь | Мой блог

"Никогда не сомневайтесь в себе и любите каждую свою работу, даже если она кажется вам грязью на окне. Через это окно люди смотрят на мир, тогда как разводы замечаете только вы." © Николай Ободников. "Лиллехейм. Волчий ветер‌‍

Поделиться17514.03.23 14:10

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Свернутый текст

Закончил сегодня с реализацией шаблона ни для чего конкретного. Это дизайн наоборот, основанный на сочетании однотонного задника и картиночнтого тела форума. Ярко, сочно, вычурно как бархатцы. В качестве пробы пера изменена форма входа, картинка с задника множится, вертится и фильтруется. Шаблон действительно очень яркий.

Цитировать Сообщение 175

Поделиться17622.03.23 09:46

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Сториз

Код:

[html]
<style>
h5 {
  opacity: 0.66;
  font-weight: normal;
  font-size: 1.25rem;
}

.container {
  position: relative;
  width: 430px;
  height: 350px;
  margin: 50px auto;
  background: #fafafa;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}

.time {
  padding: 10px;
  display: flex;
  justify-content: space-around;
}

.time-item {
  flex: 1 1 auto;
  border-radius: 5px;
  margin-right: 5px;
  height: 10px;
  background-color: rgba(0,0,0,0.10);
  position: relative;
  overflow: hidden;
}

.time-item:last-child {
  margin-right: 0;
}

.time-item > div {
  position: absolute;
  width: 0%;
  height: 100%;
  background-color: rgba(255,255,255,0.5);
}

.content {
  position: absolute;
  height: 350px;
  width:430px;
  background-image: linear-gradient(-180deg, rgba(255,255,255,0.00) 0%, rgba(0,0,0,0.15) 100%);

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.texts {
  padding: 7%;
}

#back, #next {
  position: absolute;
  top: 0;
}

#back {
  left: 0;
  height: 100%;
  width: 50%;
}

#next {
  left: 50%;
  height: 100%;
  width: 50%;
}

</style>
<script>

const stories = [
  {
    title: 'Story 1',
    description: 'description 1',
    image: 'https://i.pinimg.com/736x/2e/be/62/2ebe623d6d27d70ea13731a01b4210e9.jpg',
    time: 3500
  },
  {
    title: 'Story 2',
    description: 'description 2',
    image: 'https://i.pinimg.com/736x/7c/f8/18/7cf818809ed21f9d21263b8a8417d504.jpg',
    time: 4000
  },{
    title: 'Story 3',
    description: 'description 3',
    image: 'https://i.pinimg.com/736x/b7/7b/e1/b77be1a020e21187490bb65859d2832c.jpg',
    time: 2500
  },
  {
    title: 'Story 4',
    description: 'description 4',
    image: 'https://i.pinimg.com/736x/8d/77/5e/8d775e040b58466a44518ad6b5c2a678.jpg',
    time: 7500
  }
]

const container = document.querySelector('.container')
const nextButton = document.querySelector('#next')
const backButton = document.querySelector('#back')

function Storyfier(storiesArray, rootEl) {
  this.stories = storiesArray
  this.root = rootEl
  this.times = rootEl.querySelector('#times')
  this.currentTime = 0
  this.currentIndex = 0

  // create breakpoints for when the slides should change
  this.intervals = this.stories.map((story, index) => {
    // TODO change so that it just uses the previous value + current time
    let sum = 0
    for (let i = 0; i < index; i++){
      sum += this.stories[i].time
    }
    return sum
  })

  // necessary to make sure the last slide plays to completion
  this.maxTime = this.intervals[this.intervals.length - 1] + this.stories[this.stories.length - 1].time

  // render progress bars
  this.progressBars = this.stories.map(() => {
    const el = document.createElement('div')
    el.classList.add('time-item')
    el.innerHTML = '<div style="width: 0%"></div>'
    return el
  })

  this.progressBars.forEach((el) => {
    this.times.appendChild(el)
  })

  // methods
  this.render = () => {
    const story = this.stories[this.currentIndex]
    this.root.style.background = `url('${story.image}')`
    this.root.querySelector('#title').innerHTML = story.title
    this.root.querySelector('#description').innerHTML = story.description
  }

  this.updateProgress = () => {
    this.progressBars.map((bar, index) => {
      // Fill already passed bars
      if (this.currentIndex > index) {
        bar.querySelector('div').style.width = '100%'
        return
      }

      if (this.currentIndex < index) {
        bar.querySelector('div').style.width = '0%'
        return
      }

      // update progress of current bar
      if (this.currentIndex == index) {
        const timeStart = this.intervals[this.currentIndex]

        let timeEnd;
        if (this.currentIndex == this.stories.length - 1){
          timeEnd = this.maxTime
        } else {
          timeEnd = this.intervals[this.currentIndex + 1]
        }

        const animatable = bar.querySelector('div')
        animatable.style.width = `${((this.currentTime - timeStart)/(timeEnd - timeStart))*100}%`


      }
    })
  }
}

Storyfier.prototype.start = function(){
  // Render initial state
  this.render()

  // START INTERVAL
  const test = setInterval(() => {
    this.currentTime += 10
    this.updateProgress()

    if (this.currentIndex >= this.stories.length - 1 && (this.currentTime > this.maxTime)){
      clearInterval(test)
      return
    }

    const lastIndex = this.currentIndex
    if (this.currentTime >= this.intervals[this.currentIndex + 1]){
      this.currentIndex += 1
    }

    if (this.currentIndex != lastIndex) {
      this.render()
    }
  }, 10)
}

Storyfier.prototype.next = function(){
  const next = this.currentIndex + 1
  if (next > this.stories.length - 1){
    return
  }

  this.currentIndex = next
  this.currentTime = this.intervals[this.currentIndex]
  this.render()
}

Storyfier.prototype.back = function(){
  if ((this.currentTime > (this.intervals[this.currentIndex] + 350)) || this.currentIndex === 0){
    this.currentTime = this.intervals[this.currentIndex]
    return
  }

  this.currentIndex -= 1
  this.currentTime = this.intervals[this.currentIndex]
  this.render()
}

const setup = async () => {
  const loadImages = stories.map(({ image }) => {
    return new Promise((resolve, reject) => {
      let img = new Image()
      img.onload = () => {
        resolve(image)
      }
      img.src = image
    })
  })

  await Promise.all(loadImages)

  const s = new Storyfier(stories, container);
  s.start()

  nextButton.addEventListener('click', () => {
    s.next()
  })

  backButton.addEventListener('click', () => {
    s.back()
  })
}

setup()

</script>
<div class="container">
  <div id="times" class="time">
  </div>

  <div class="content">
    <div class="texts">
      <h1 id="title"></h1>
      <h5 id="description"></h5>
    </div>
  </div>

  <div id="back"></div>
  <div id="next"></div>
</div>
[/html]

Цитировать Сообщение 176

Поделиться17726.04.23 13:28

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Как может выглядеть контейнер под статистику если применить к нему display: flex;

Цитировать Сообщение 177

Поделиться17817.05.23 08:31

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Стильные кнопочки
https://codepen.io/jkantner/pen/QWZrMeB

Код:

[html]
<style>
:root {
	--hue: 223;
	--bg: hsl(var(--hue),10%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}

.icon-btns {
	display: grid;
	grid-gap: 3em;
	grid-template-columns: repeat(2,1fr);
	margin: auto;
	padding: 3em 0;
}
.icon-btn {
	background-color: transparent;
	outline: transparent;
	position: relative;
	width: 4.5em;
	height: 4.5em;
	perspective: 24em;
	transform-style: preserve-3d;
	-webkit-tap-highlight-color: transparent;
border: none;
}
.icon-btn__back,
.icon-btn__front,
.icon-btn__label {
	transition:
    opacity var(--trans-dur) cubic-bezier(0.83,0,0.17,1),
    transform var(--trans-dur) cubic-bezier(0.83,0,0.17,1);
}
.icon-btn__back,
.icon-btn__front {
	border-radius: 1.25em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.icon-btn__back {
	background: linear-gradient(hsl(var(--hue),10%,50%),hsl(208,10%,50%));
	box-shadow: 0.5em -0.5em 0.75em hsla(var(--hue),10%,10%,0.15);
	display: block;
	transform: rotate(15deg);
	transform-origin: 100% 100%;
}
.icon-btn__front {
	background-color: hsla(0,0%,100%,0.3);
	box-shadow: 0 0 0 0.125em hsla(0,0%,100%,0.3) inset;
	backdrop-filter: blur(0.75em);
	-webkit-backdrop-filter: blur(0.75em);
	display: flex;
	transform-origin: 80% 50%;
}
.icon-btn--blue .icon-btn__back {
	background: linear-gradient(hsl(var(--hue),90%,50%),hsl(208,90%,50%));
}
.icon-btn--green .icon-btn__back {
	background: linear-gradient(hsl(123,90%,40%),hsl(108,90%,40%));
}
.icon-btn--indigo .icon-btn__back {
	background: linear-gradient(hsl(253,90%,50%),hsl(238,90%,50%));
}
.icon-btn--purple .icon-btn__back {
	background: linear-gradient(hsl(283,90%,50%),hsl(268,90%,50%));
}
.icon-btn--red .icon-btn__back {
	background: linear-gradient(hsl(3,90%,50%),hsl(348,90%,50%));
}
.icon-btn--orange .icon-btn__back {
	background: linear-gradient(hsl(43,90%,50%),hsl(28,90%,50%));
}
.icon-btn__icon {
	margin: auto;
	width: 1.5em;
	height: 1.5em;
}
.icon-btn__label {
	font-size: 0.75em;
	line-height: 2;
	opacity: 0;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	transform: translateY(0);
color: #fff;
}
.icon-btn:focus-visible .icon-btn__back,
.icon-btn:hover .icon-btn__back {
	transform: rotate(22.5deg);
}
.icon-btn:focus-visible .icon-btn__front,
.icon-btn:hover .icon-btn__front {
	transform: translateZ(3em) rotateX(20deg) rotateY(20deg);
}
.icon-btn:focus-visible .icon-btn__label,
.icon-btn:hover .icon-btn__label {
	opacity: 1;
	transform: translateY(20%);
}
.sprites {
	display: block;
	position: fixed;
	transform: translateY(-100%);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
    --bg: hsl(var(--hue),10%,30%);
    --fg: hsl(var(--hue),10%,90%);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	.icon-btns {
    grid-template-columns: repeat(3,1fr);
	}
}
</style>

<container style="background: #6e5a5a;
display: block;
padding: 20px 0px 10px 60px;">
<svg class="sprites" display="none">
	<defs>
    <linearGradient id="icon-grad" x1="0" y1="0" x2="1" y2="1">
    	<stop offset="0%" stop-color="#fff" />
    	<stop offset="100%" stop-color="#222" />
    </linearGradient>
    <mask id="icon-mask">
    	<rect x="0" y="0" width="24" height="24" fill="url(#icon-grad)" />
    </mask>
    <symbol id="files" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <path d="m2.003,3h3.997c1.105,0,2,.895,2,2h0s14.005,0,14.005,0c1.102,0,1.995.893,1.995,1.995v1.005H0v-2.997c0-1.106.897-2.003,2.003-2.003Z"/>
        <path d="m22.005,21H1.996c-1.102,0-1.996-.893-1.996-1.996v-9.004l24-.172v9.177c0,1.102-.893,1.995-1.995,1.995Z"/>
    	</g>
    </symbol>
    <symbol id="books" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <path d="m14.113,22.696c-.356.389-1.022.176-1.022-.351V3.287c1.091-1.091,2.277-1.558,3.509-1.83,2.182-.481,4.125-.377,5.314-.222,1.317.171,2.087,1.342,2.087,2.495v14.357c0,1.553-1.296,2.777-2.802,2.727-1.246-.041-2.975.003-4.541.382-1.195.289-1.954.856-2.544,1.501Z"/>
        <path d="m9.887,22.696c.356.389,1.022.176,1.022-.351V3.287c-1.091-1.091-2.277-1.558-3.509-1.83-2.182-.481-4.125-.377-5.314-.222C.77,1.406,0,2.577,0,3.729v14.357c0,1.553,1.296,2.777,2.802,2.727,1.246-.041,2.975.003,4.541.382,1.194.289,1.954.856,2.544,1.501Z"/>
    	</g>
    </symbol>
    <symbol id="graph" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <rect rx="1" ry="1" x="0" y="12" width="6" height="12" />
        <rect rx="1" ry="1" x="9" y="0" width="6" height="24" />
        <rect rx="1" ry="1" x="18" y="6" width="6" height="18" />
    	</g>
    </symbol>
    <symbol id="weather" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <path d="m2.65,10.95c.916-.546,1.986-.858,3.129-.858.138,0,.276.004.414.013.388-1.331,1.13-2.499,2.113-3.403-.187-2.126-1.971-3.791-4.144-3.791-2.299,0-4.162,1.863-4.162,4.162,0,1.766,1.1,3.273,2.65,3.877Z"/>
        <path d="m19.687,12.464s-.003,0-.005,0c.002-.072.005-.144.005-.216,0-3.454-2.8-6.254-6.253-6.254-3.235,0-5.897,2.457-6.22,5.607-.454-.14-.936-.216-1.435-.216-2.679,0-4.852,2.172-4.852,4.852s2.172,4.852,4.852,4.852h13.908c2.382,0,4.313-1.931,4.313-4.312,0-2.382-1.931-4.313-4.313-4.313Z"/>
    	</g>
    </symbol>
    <symbol id="pen" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <path d="M3.1,0C2.5-0.1,2.1,0.6,2.5,1L10,8.5c0.2,0,0.4-0.1,0.6-0.1c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2c-1.2,0-2.2-1-2.2-2.2c0-0.2,0-0.4,0.1-0.6L1,2.5C0.6,2.1-0.1,2.5,0,3.1L3.4,17c0.1,0.4,0.4,0.7,0.9,0.8l6.4,1.3c-0.2,0.4-0.1,0.9,0.2,1.2l3.3,3.3c0.4,0.4,1.1,0.4,1.6,0l7.8-7.8c0.4-0.4,0.4-1.1,0-1.6l-3.3-3.3c-0.3-0.3-0.8-0.4-1.2-0.2l-1.3-6.4c-0.1-0.4-0.4-0.8-0.8-0.9L3.1,0z"/>
    	</g>
    </symbol>
    <symbol id="heart" viewBox="0 0 24 24">
    	<g fill="hsl(0,0%,100%)" mask="url(#icon-mask)">
        <path d="m.204,9.117c.272,1.039.791,1.942,1.558,2.709l10.238,10.597,10.238-10.597c.767-.767,1.287-1.67,1.558-2.709.272-1.039.272-2.07,0-3.093-.272-1.023-.791-1.918-1.558-2.685-.767-.767-1.662-1.287-2.685-1.558-1.023-.272-2.062-.272-3.117,0-1.055.272-1.95.791-2.685,1.558l-1.75,2.11-1.75-2.11c-.767-.767-1.662-1.287-2.685-1.558s-2.054-.272-3.093,0c-1.039.272-1.942.791-2.709,1.558-.767.767-1.287,1.662-1.558,2.685-.272,1.023-.272,2.054,0,3.093Z"/>
    	</g>
    </symbol>
	</defs>
</svg>
<div class="icon-btns">
	<button class="icon-btn icon-btn--blue" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#files" />
    	</svg>
    </span>
    <span class="icon-btn__label">Files</span>
	</button>
	<button class="icon-btn icon-btn--purple" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#books" />
    	</svg>
    </span>
    <span class="icon-btn__label">Books</span>
	</button>
	<button class="icon-btn icon-btn--red" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#heart" />
    	</svg>
    </span>
    <span class="icon-btn__label">Health</span>
	</button>
	<button class="icon-btn icon-btn--indigo" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#weather" />
    	</svg>
    </span>
    <span class="icon-btn__label">Weather</span>
	</button>
	<button class="icon-btn icon-btn--orange" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#pen" />
    	</svg>
    </span>
    <span class="icon-btn__label">Notes</span>
	</button>
	<button class="icon-btn icon-btn--green" type="button">
    <span class="icon-btn__back"></span>
    <span class="icon-btn__front">
    	<svg class="icon-btn__icon" width="24px" height="24px" aria-hidden="true">
        <use xlink:href="#graph" />
    	</svg>
    </span>
    <span class="icon-btn__label">Spreadsheets</span>
	</button>
</div>
</container>
[/html]

Отредактировано Will O The Wisp (17.05.23 08:32)

Цитировать Сообщение 178

Поделиться17914.07.23 09:56

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Работающая авадакедавра с размещением в теме

Код:

[html]
<style>

#container {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 800px;
}

.a-title {
  position: absolute;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-image: conic-gradient(#ed0101, blue);
  pointer-events: none;
  mix-blend-mode: difference;
  filter: drop-shadow(2px 4px 6px black);
}
.a-second-title {
  position: absolute;
  margin-top: 25vh;
  pointer-events: none;
  -webkit-text-stroke: 1.3px white;
  letter-spacing: 1.125px;
  font-size: -webkit-xxx-large;
  font-weight: 900;
  mix-blend-mode: color-dodge;
}

canvas {
  width: 100%;
  height: 100%;
}

</style>
<script>
'use strict';

const canvas = document.getElementsByTagName('canvas')[0];
canvas.width = canvas.clientWidth;
canvas.height = canvas.clientHeight;

let config = {
  TEXTURE_DOWNSAMPLE: 1,
  DENSITY_DISSIPATION: 0.98,
  VELOCITY_DISSIPATION: 0.99,
  PRESSURE_DISSIPATION: 0.8,
  PRESSURE_ITERATIONS: 25,
  CURL: 28,
  SPLAT_RADIUS: 0.004 };


let pointers = [];
let splatStack = [];

const { gl, ext } = getWebGLContext(canvas);

function getWebGLContext(canvas) {
  const params = { alpha: false, depth: false, stencil: false, antialias: false };

  let gl = canvas.getContext('webgl2', params);
  const isWebGL2 = !!gl;
  if (!isWebGL2)
  gl = canvas.getContext('webgl', params) || canvas.getContext('experimental-webgl', params);

  let halfFloat;
  let supportLinearFiltering;
  if (isWebGL2) {
    gl.getExtension('EXT_color_buffer_float');
    supportLinearFiltering = gl.getExtension('OES_texture_float_linear');
  } else {
    halfFloat = gl.getExtension('OES_texture_half_float');
    supportLinearFiltering = gl.getExtension('OES_texture_half_float_linear');
  }

  gl.clearColor(0.0, 0.0, 0.0, 1.0);

  const halfFloatTexType = isWebGL2 ? gl.HALF_FLOAT : halfFloat.HALF_FLOAT_OES;
  let formatRGBA;
  let formatRG;
  let formatR;

  if (isWebGL2)
  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RG16F, gl.RG, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.R16F, gl.RED, halfFloatTexType);
  } else

  {
    formatRGBA = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatRG = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
    formatR = getSupportedFormat(gl, gl.RGBA, gl.RGBA, halfFloatTexType);
  }

  return {
    gl,
    ext: {
      formatRGBA,
      formatRG,
      formatR,
      halfFloatTexType,
      supportLinearFiltering } };


}

function getSupportedFormat(gl, internalFormat, format, type)
{
  if (!supportRenderTextureFormat(gl, internalFormat, format, type))
  {
    switch (internalFormat) {

      case gl.R16F:
        return getSupportedFormat(gl, gl.RG16F, gl.RG, type);
      case gl.RG16F:
        return getSupportedFormat(gl, gl.RGBA16F, gl.RGBA, type);
      default:
        return null;}

  }

  return {
    internalFormat,
    format };

}

function supportRenderTextureFormat(gl, internalFormat, format, type) {
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, 4, 4, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);

  const status = gl.checkFramebufferStatus(gl.FRAMEBUFFER);
  if (status != gl.FRAMEBUFFER_COMPLETE)
  return false;
  return true;
}

function pointerPrototype() {
  this.id = -1;
  this.x = 0;
  this.y = 0;
  this.dx = 0;
  this.dy = 0;
  this.down = false;
  this.moved = false;
  this.color = [30, 0, 300];
}

pointers.push(new pointerPrototype());

class GLProgram {
  constructor(vertexShader, fragmentShader) {
    this.uniforms = {};
    this.program = gl.createProgram();

    gl.attachShader(this.program, vertexShader);
    gl.attachShader(this.program, fragmentShader);
    gl.linkProgram(this.program);

    if (!gl.getProgramParameter(this.program, gl.LINK_STATUS))
    throw gl.getProgramInfoLog(this.program);

    const uniformCount = gl.getProgramParameter(this.program, gl.ACTIVE_UNIFORMS);
    for (let i = 0; i < uniformCount; i++) {
      const uniformName = gl.getActiveUniform(this.program, i).name;
      this.uniforms[uniformName] = gl.getUniformLocation(this.program, uniformName);
    }
  }

  bind() {
    gl.useProgram(this.program);
  }}


function compileShader(type, source) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);

  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
  throw gl.getShaderInfoLog(shader);

  return shader;
};

const baseVertexShader = compileShader(gl.VERTEX_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    attribute vec2 aPosition;
    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform vec2 texelSize;

    void main () {
        vUv = aPosition * 0.5 + 0.5;
        vL = vUv - vec2(texelSize.x, 0.0);
        vR = vUv + vec2(texelSize.x, 0.0);
        vT = vUv + vec2(0.0, texelSize.y);
        vB = vUv - vec2(0.0, texelSize.y);
        gl_Position = vec4(aPosition, 0.0, 1.0);
    }
`);

const clearShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;
    uniform float value;

    void main () {
        gl_FragColor = value * texture2D(uTexture, vUv);
    }
`);

const displayShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTexture;

    void main () {
        gl_FragColor = texture2D(uTexture, vUv);
    }
`);

const splatShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uTarget;
    uniform float aspectRatio;
    uniform vec3 color;
    uniform vec2 point;
    uniform float radius;

    void main () {
        vec2 p = vUv - point.xy;
        p.x *= aspectRatio;
        vec3 splat = exp(-dot(p, p) / radius) * color;
        vec3 base = texture2D(uTarget, vUv).xyz;
        gl_FragColor = vec4(base + splat, 1.0);
    }
`);

const advectionManualFilteringShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    vec4 bilerp (in sampler2D sam, in vec2 p) {
        vec4 st;
        st.xy = floor(p - 0.5) + 0.5;
        st.zw = st.xy + 1.0;
        vec4 uv = st * texelSize.xyxy;
        vec4 a = texture2D(sam, uv.xy);
        vec4 b = texture2D(sam, uv.zy);
        vec4 c = texture2D(sam, uv.xw);
        vec4 d = texture2D(sam, uv.zw);
        vec2 f = p - st.xy;
        return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
    }

    void main () {
        vec2 coord = gl_FragCoord.xy - dt * texture2D(uVelocity, vUv).xy;
        gl_FragColor = dissipation * bilerp(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const advectionShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    uniform sampler2D uVelocity;
    uniform sampler2D uSource;
    uniform vec2 texelSize;
    uniform float dt;
    uniform float dissipation;

    void main () {
        vec2 coord = vUv - dt * texture2D(uVelocity, vUv).xy * texelSize;
        gl_FragColor = dissipation * texture2D(uSource, coord);
        gl_FragColor.a = 1.0;
    }
`);

const divergenceShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    vec2 sampleVelocity (in vec2 uv) {
        vec2 multiplier = vec2(1.0, 1.0);
        if (uv.x < 0.0) { uv.x = 0.0; multiplier.x = -1.0; }
        if (uv.x > 1.0) { uv.x = 1.0; multiplier.x = -1.0; }
        if (uv.y < 0.0) { uv.y = 0.0; multiplier.y = -1.0; }
        if (uv.y > 1.0) { uv.y = 1.0; multiplier.y = -1.0; }
        return multiplier * texture2D(uVelocity, uv).xy;
    }

    void main () {
        float L = sampleVelocity(vL).x;
        float R = sampleVelocity(vR).x;
        float T = sampleVelocity(vT).y;
        float B = sampleVelocity(vB).y;
        float div = 0.5 * (R - L + T - B);
        gl_FragColor = vec4(div, 0.0, 0.0, 1.0);
    }
`);

const curlShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;

    void main () {
        float L = texture2D(uVelocity, vL).y;
        float R = texture2D(uVelocity, vR).y;
        float T = texture2D(uVelocity, vT).x;
        float B = texture2D(uVelocity, vB).x;
        float vorticity = R - L - T + B;
        gl_FragColor = vec4(vorticity, 0.0, 0.0, 1.0);
    }
`);

const vorticityShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uVelocity;
    uniform sampler2D uCurl;
    uniform float curl;
    uniform float dt;

    void main () {
        float T = texture2D(uCurl, vT).x;
        float B = texture2D(uCurl, vB).x;
        float C = texture2D(uCurl, vUv).x;
        vec2 force = vec2(abs(T) - abs(B), 0.0);
        force *= 1.0 / length(force + 0.00001) * curl * C;
        vec2 vel = texture2D(uVelocity, vUv).xy;
        gl_FragColor = vec4(vel + force * dt, 0.0, 1.0);
    }
`);

const pressureShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uDivergence;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        float C = texture2D(uPressure, vUv).x;
        float divergence = texture2D(uDivergence, vUv).x;
        float pressure = (L + R + B + T - divergence) * 0.25;
        gl_FragColor = vec4(pressure, 0.0, 0.0, 1.0);
    }
`);

const gradientSubtractShader = compileShader(gl.FRAGMENT_SHADER, `
    precision highp float;
    precision mediump sampler2D;

    varying vec2 vUv;
    varying vec2 vL;
    varying vec2 vR;
    varying vec2 vT;
    varying vec2 vB;
    uniform sampler2D uPressure;
    uniform sampler2D uVelocity;

    vec2 boundary (in vec2 uv) {
        uv = min(max(uv, 0.0), 1.0);
        return uv;
    }

    void main () {
        float L = texture2D(uPressure, boundary(vL)).x;
        float R = texture2D(uPressure, boundary(vR)).x;
        float T = texture2D(uPressure, boundary(vT)).x;
        float B = texture2D(uPressure, boundary(vB)).x;
        vec2 velocity = texture2D(uVelocity, vUv).xy;
        velocity.xy -= vec2(R - L, T - B);
        gl_FragColor = vec4(velocity, 0.0, 1.0);
    }
`);

let textureWidth;
let textureHeight;
let density;
let velocity;
let divergence;
let curl;
let pressure;
initFramebuffers();

const clearProgram = new GLProgram(baseVertexShader, clearShader);
const displayProgram = new GLProgram(baseVertexShader, displayShader);
const splatProgram = new GLProgram(baseVertexShader, splatShader);
const advectionProgram = new GLProgram(baseVertexShader, ext.supportLinearFiltering ? advectionShader : advectionManualFilteringShader);
const divergenceProgram = new GLProgram(baseVertexShader, divergenceShader);
const curlProgram = new GLProgram(baseVertexShader, curlShader);
const vorticityProgram = new GLProgram(baseVertexShader, vorticityShader);
const pressureProgram = new GLProgram(baseVertexShader, pressureShader);
const gradienSubtractProgram = new GLProgram(baseVertexShader, gradientSubtractShader);

function initFramebuffers() {
  textureWidth = gl.drawingBufferWidth >> config.TEXTURE_DOWNSAMPLE;
  textureHeight = gl.drawingBufferHeight >> config.TEXTURE_DOWNSAMPLE;

  const texType = ext.halfFloatTexType;
  const rgba = ext.formatRGBA;
  const rg = ext.formatRG;
  const r = ext.formatR;

  density = createDoubleFBO(2, textureWidth, textureHeight, rgba.internalFormat, rgba.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  velocity = createDoubleFBO(0, textureWidth, textureHeight, rg.internalFormat, rg.format, texType, ext.supportLinearFiltering ? gl.LINEAR : gl.NEAREST);
  divergence = createFBO(4, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  curl = createFBO(5, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
  pressure = createDoubleFBO(6, textureWidth, textureHeight, r.internalFormat, r.format, texType, gl.NEAREST);
}

function createFBO(texId, w, h, internalFormat, format, type, param) {
  gl.activeTexture(gl.TEXTURE0 + texId);
  let texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, param);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  gl.texImage2D(gl.TEXTURE_2D, 0, internalFormat, w, h, 0, format, type, null);

  let fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
  gl.viewport(0, 0, w, h);
  gl.clear(gl.COLOR_BUFFER_BIT);

  return [texture, fbo, texId];
}

function createDoubleFBO(texId, w, h, internalFormat, format, type, param) {
  let fbo1 = createFBO(texId, w, h, internalFormat, format, type, param);
  let fbo2 = createFBO(texId + 1, w, h, internalFormat, format, type, param);

  return {
    get read() {
      return fbo1;
    },
    get write() {
      return fbo2;
    },
    swap() {
      let temp = fbo1;
      fbo1 = fbo2;
      fbo2 = temp;
    } };

}

const blit = (() => {
  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, -1, 1, 1, 1, 1, -1]), gl.STATIC_DRAW);
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0, 1, 2, 0, 2, 3]), gl.STATIC_DRAW);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.enableVertexAttribArray(0);

  return destination => {
    gl.bindFramebuffer(gl.FRAMEBUFFER, destination);
    gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
  };
})();

let lastTime = Date.now();
multipleSplats(parseInt(Math.random() * 20) + 5);
update();

function update() {
  resizeCanvas();

  const dt = Math.min((Date.now() - lastTime) / 1000, 0.016);
  lastTime = Date.now();

  gl.viewport(0, 0, textureWidth, textureHeight);

  if (splatStack.length > 0)
  multipleSplats(splatStack.pop());

  advectionProgram.bind();
  gl.uniform2f(advectionProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, velocity.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dt, dt);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.VELOCITY_DISSIPATION);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(advectionProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(advectionProgram.uniforms.uSource, density.read[2]);
  gl.uniform1f(advectionProgram.uniforms.dissipation, config.DENSITY_DISSIPATION);
  blit(density.write[1]);
  density.swap();

  for (let i = 0; i < pointers.length; i++) {
    const pointer = pointers[i];
    if (pointer.moved) {
      splat(pointer.x, pointer.y, pointer.dx, pointer.dy, pointer.color);
      pointer.moved = false;
    }
  }

  curlProgram.bind();
  gl.uniform2f(curlProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(curlProgram.uniforms.uVelocity, velocity.read[2]);
  blit(curl[1]);

  vorticityProgram.bind();
  gl.uniform2f(vorticityProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(vorticityProgram.uniforms.uVelocity, velocity.read[2]);
  gl.uniform1i(vorticityProgram.uniforms.uCurl, curl[2]);
  gl.uniform1f(vorticityProgram.uniforms.curl, config.CURL);
  gl.uniform1f(vorticityProgram.uniforms.dt, dt);
  blit(velocity.write[1]);
  velocity.swap();

  divergenceProgram.bind();
  gl.uniform2f(divergenceProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(divergenceProgram.uniforms.uVelocity, velocity.read[2]);
  blit(divergence[1]);

  clearProgram.bind();
  let pressureTexId = pressure.read[2];
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
  gl.uniform1i(clearProgram.uniforms.uTexture, pressureTexId);
  gl.uniform1f(clearProgram.uniforms.value, config.PRESSURE_DISSIPATION);
  blit(pressure.write[1]);
  pressure.swap();

  pressureProgram.bind();
  gl.uniform2f(pressureProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(pressureProgram.uniforms.uDivergence, divergence[2]);
  pressureTexId = pressure.read[2];
  gl.uniform1i(pressureProgram.uniforms.uPressure, pressureTexId);
  gl.activeTexture(gl.TEXTURE0 + pressureTexId);
  for (let i = 0; i < config.PRESSURE_ITERATIONS; i++) {
    gl.bindTexture(gl.TEXTURE_2D, pressure.read[0]);
    blit(pressure.write[1]);
    pressure.swap();
  }

  gradienSubtractProgram.bind();
  gl.uniform2f(gradienSubtractProgram.uniforms.texelSize, 1.0 / textureWidth, 1.0 / textureHeight);
  gl.uniform1i(gradienSubtractProgram.uniforms.uPressure, pressure.read[2]);
  gl.uniform1i(gradienSubtractProgram.uniforms.uVelocity, velocity.read[2]);
  blit(velocity.write[1]);
  velocity.swap();

  gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
  displayProgram.bind();
  gl.uniform1i(displayProgram.uniforms.uTexture, density.read[2]);
  blit(null);

  requestAnimationFrame(update);
}

function splat(x, y, dx, dy, color) {
  splatProgram.bind();
  gl.uniform1i(splatProgram.uniforms.uTarget, velocity.read[2]);
  gl.uniform1f(splatProgram.uniforms.aspectRatio, canvas.width / canvas.height);
  gl.uniform2f(splatProgram.uniforms.point, x / canvas.width, 1.0 - y / canvas.height);
  gl.uniform3f(splatProgram.uniforms.color, dx, -dy, 1.0);
  gl.uniform1f(splatProgram.uniforms.radius, config.SPLAT_RADIUS);
  blit(velocity.write[1]);
  velocity.swap();

  gl.uniform1i(splatProgram.uniforms.uTarget, density.read[2]);
  gl.uniform3f(splatProgram.uniforms.color, color[0] * 0.3, color[1] * 0.3, color[2] * 0.3);
  blit(density.write[1]);
  density.swap();
}

function multipleSplats(amount) {
  for (let i = 0; i < amount; i++) {
    const color = [Math.random() * 10, Math.random() * 10, Math.random() * 10];
    const x = canvas.width * Math.random();
    const y = canvas.height * Math.random();
    const dx = 1000 * (Math.random() - 0.5);
    const dy = 1000 * (Math.random() - 0.5);
    splat(x, y, dx, dy, color);
  }
}

function resizeCanvas() {
  if (canvas.width != canvas.clientWidth || canvas.height != canvas.clientHeight) {
    canvas.width = canvas.clientWidth;
    canvas.height = canvas.clientHeight;
    initFramebuffers();
  }
}

canvas.addEventListener('mousemove', e => {
  pointers[0].moved = pointers[0].down;
  pointers[0].dx = (e.offsetX - pointers[0].x) * 10.0;
  pointers[0].dy = (e.offsetY - pointers[0].y) * 10.0;
  pointers[0].x = e.offsetX;
  pointers[0].y = e.offsetY;
});

canvas.addEventListener('touchmove', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    let pointer = pointers[i];
    pointer.moved = pointer.down;
    pointer.dx = (touches[i].pageX - pointer.x) * 10.0;
    pointer.dy = (touches[i].pageY - pointer.y) * 10.0;
    pointer.x = touches[i].pageX;
    pointer.y = touches[i].pageY;
  }
}, false);

canvas.addEventListener('mousemove', () => {
  pointers[0].down = true;
  pointers[0].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
});

canvas.addEventListener('touchstart', e => {
  e.preventDefault();
  const touches = e.targetTouches;
  for (let i = 0; i < touches.length; i++) {
    if (i >= pointers.length)
    pointers.push(new pointerPrototype());

    pointers[i].id = touches[i].identifier;
    pointers[i].down = true;
    pointers[i].x = touches[i].pageX;
    pointers[i].y = touches[i].pageY;
    pointers[i].color = [Math.random() + 0.2, Math.random() + 0.2, Math.random() + 0.2];
  }
});

window.addEventListener('mouseleave', () => {
  pointers[0].down = false;
});

window.addEventListener('touchend', e => {
  const touches = e.changedTouches;
  for (let i = 0; i < touches.length; i++)
  for (let j = 0; j < pointers.length; j++)
  if (touches[i].identifier == pointers[j].id)
  pointers[j].down = false;
});
</script>

<section id='container'>
  <h1 class='a-title'>Move the mouse</h1>
  <h2 class='a-second-title'>See the magic</h2>
  <canvas></canvas>
</section>

[/html]

Цитировать Сообщение 179

Поделиться18021.12.23 18:39

Автор: Will O The Wisp
Участник
Последний визит:
10.12.24 18:09
Уважение: +594

Аватар в строке приветствия + код юзер-панели с аватаркой и сменой аватара по клику

Код:

<!-- Аватарка в строке приветствия плюс смена аватара по клику-->
<script>$('#pun-status>p').prepend('<div id="u-ava"></div>')</script>
<script type="text/javascript">
if (UserAvatar == ""){UserAvatar = "https://i.imgur.com/S1lii2p.png"}
var arr=document.getElementsByTagName("div")
i=0
while(arr[i] ){
if(arr[i].id=="u-ava") {
name=arr[i].innerHTML
name=name.substring(0)
arr[i].innerHTML="<a href='/profile.php?section=avatar&id="+UserID+"' title='Изменить аватар'><img style='width: 45px; height: auto; vertical-align: middle; border-radius: 5%;    margin: -1.6em -50px;  float: inline-end; border: 2px solid #a29c99;' src="+UserAvatar+"></a>"+name
}
if(arr[i].id=="u-ava" && GroupID == "3") {
arr[i].innerHTML="<a href='/register.php'><img style='width: 45px; height: auto; vertical-align: middle; border-radius: 5%;    margin: -1.6em -50px;  float: inline-end; border: 2px solid #a29c99;' src='https://i.imgur.com/rn6keOU.png' title='Регистрация'></a>"+name
}
i++}
</script>

Цитировать Сообщение 180

Ответить

Страница: « 1 … 16 17 18 19 20 21 »

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»

Имя

font_download format_size format_bold format_italic format_underlined strikethrough_s format_paint color_lens

format_align_left format_align_center format_align_right list table_view

link add_photo_alternate ondemand_video mood mic

content_cut lock_open format_quote code

horizontal_rule anchor live_help emoji_symbols library_add

ТочкамиDots

КружочкамиCircles

КвадратамиSquares

ЦифрамиNumbers

Римскими цифрамиRoman Numerals

Без обозначенийNo Markers

Многострочный пункт спискаMultiline List Item

ТекстText

HTML

Javascript

Bebas Neue Arial Georgia Microsoft Sans Serif Tahoma Verdana Century Gothic Palatino Linotype Times New Roman Franklin Gothic Medium Impact Arial Black Courier New Lucida Console Comic Sans Ms

10px 12px 14px 16px 18px 20px 22px

ЗаголовокTitle Автосжатие больших картинокAuto-resize large images Скрыть от гостейHide from guests Ссылка «скачать» Download link Имя читателяReader's name Добавлено спустя…Added after... Надстрочный текстSuperscript text Подстрочный текстSubscript text БлокBlock HTML иконка

Скрыть инструментарий Показать инструментарий

Теги оформления специальных постов

Сделать пост специальным[block="portfoliopost"]portfoliopost[/block],

Светлый фон[block="makeportfoliolight"]makeportfoliolight[/block],

Красный пост[block="saledpost"]saledpost[/block],

Синий пост[block="forsalepost"]forsalepost[/block],

Зеленый пост[block="freepost"]freepost[/block],

Пост без профиля[block="no-prof"]no-prof[/block],

Теги оформления картинок

Обложки: Для одной картинки по центру в рамке, автоматически уменьшается до ширины 480px

Обложка[block="cover"][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Закрыто[block="cover"][block="icon material-icons"]lock[/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Продажа[block="cover"][block="icon fa-solid fa-sack-dollar"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Подарок[block="cover"][block="icon fa-solid fa-gift"][/block][block="picture"][img]ссылка на картинку,[/img][/block][/block]

Превью: Для любого количества картинок по центру в рамке, автоматически уменьшается до ширины или высоты 300px

Блок для превью[block="morepics"],[/block]

Разноцветные картинки-ссылки: Для любого количества картинок по центру в разноцветных рамках с заголовком, автоматически уменьшается до ширины 350px, минимальная высота 230px (если высота больше, картинка "обрезается" снизу, но не сжимается)

Блок для картинок-ссылок[block="port-block"],[/block]

Красный[block="p-out saled"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Синий[block="p-out forsale"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Зеленый[block="p-out free"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Желтый[block="p-out yellow"] [url=ссылка]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block] [/block]

Теги оформления контента

Обведенный текст[block="details"] [block="det"],[/block] [/block]

Добавить еще блок[block="det"],[/block]

Блок с кнопками[block="links"] [block="demo"][url=ссылка]синяя кнопка,[/url][/block] [block="store"][url=ссылка]оранжевая кнопка[/url][/block] [/block]

Синяя кнопка[block="demo"][url=ссылка]текст,[/url][/block]

Оранжевая кнопка[block="store"][url=ссылка]текст,[/url][/block]

добавить работу [block="wow bounceIn p-out,"] иконка [block="p-descr"][url=https://forumd.ru/viewtopic.php?id=]описание[/url][/block] [block="p-inner"][url=https://forumd.ru/viewtopic.php?id=][img]картинка[/img][/url][/block] [/block]

Иконки:

lock[block="icon material-icons"]lock,[/block]

[block="icon fa-solid fa-sack-dollar"],[/block]

[block="icon fa-solid fa-gift"],[/block]

ТЕГИ (вставить в p-out через пробел)

Тип работы:

под заказ saled,

на продажу forsale,

бесплатно free,

Основная категория:

Вебдизайн dis,

(для всего связанного с работой на сайтах/форумах, кроме готовых скриптов и мелкой графики)

Графика graf,

(для графона, НЕ включающего кодинг/скрипты)

Скрипты/коды code,

(для готовых разработок и работы по верстке/кодингу)
Мини-фильтры дизайнов:

адаптивные mob,

ролевые игры frpg,

компьютерные игры game,

нейтральные flat,

Подкатегории:

Дизайн форумов/сайтов fulldis,

(для полных работ по дизайну)

Макеты layout,

(для дизайнов, где только макет без кода, или работ по созданию макетов чего-либо)

Верстка dis-code,

(для работ по верстке чужих дизайнов или отдельных штук)

Соц-сети/стримы graf-s,

(графон для оформления соцсетей/стримов)

Ролевая графика/арт art,

(для мелкой графики)

Javascript/CSS js,

(для скриптов или выложенных цсс кодов)

Бесплатный диз от FD [block="p-out free fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Платный диз от FD [block="p-out forsale fd"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

Дизайн от юзеров [block="p-out yellow"] [url=https://forumd.ru/viewtopic.php?id=]заголовок,[/url] [block="picture"][img]ссылка на картинку[/img][/block][/block]

ТЕГИ (вставить в p-out через пробел)

Платформа:

MyBB.ru mybb-ru,

Макет (любая платформа) any,

Параметры:

+ PSD psd-in,

(в наличии макет помимо кодов)

+ адаптивка mob,

(есть версия для мобилок)

Тематика:

нейтральные flat,

ролевые игры frpg,

компьютерные игры game,

фентези fant,

аниме anime,

кино/сериалы kino,

стимпанк/киберпанк cyb,

мультфильмы kids,

животные cats,

Цвета:

тёмные darkst,

светлые light,

яркие bright,

добавить скрипт/код [block="SCRBLOCK"] [block="stforlink"] иконка, [block="link"][url=https://forumd.ru/viewtopic.php?id=]название[/url][/block] [/block] [block="sttags"] теги [/block] [/block]

Иконки:

[block="icon fa-brands fa-js"],[/block]

[block="icon fa-brands fa-css3-alt"],[/block]

[block="icon fa-regular fa-file-lines"],[/block]

[block="icon fa-solid fa-file-code"],[/block]

[block="icon fa-solid fa-file-invoice-dollar"],[/block]

ТЕГИ (*значение в скобках вставить в SCRBLOCK через пробел)

Тип кода:

скрипт (js)[block="js"]скрипт, js[/block]

css код (css)[block="css"]css код, css[/block]

HTML/CSS шаблоны (shab)[block="shab"]HTML/CSS шаблоны, shab[/block]

Модули/Расширения (global)[block="global"]Модули/Расширения, global[/block]

Платформа:

MyBB.ru (mybb-ru)[block="mybb-ru"]MyBB.ru, mybb-ru[/block]

Любой движок (any)[block="any"]Любой движок, any[/block]

Тип для форума:

Пользователи (users)[block="users"]Пользователи, users[/block]

Профиль (userprof)[block="userprof"]Профиль, userprof[/block]

Доп. поля профиля (adfield)[block="adfield"]Доп. поля профиля, adfield[/block]

Аватары (avatars)[block="avatars"]Аватары, avatars[/block]

Репутация (repa)[block="repa"]Репутация, repa[/block]

Группы (groups)[block="groups"]Группы, groups[/block]

Гoсти (guest)[block="guest"]Гoсти, guest[/block]

Администраторы (admins)[block="admins"]Администраторы, admins[/block]

Модераторы (moders)[block="moders"]Модераторы, moders[/block]

Регистрация (regis)[block="regis"]Регистрация, regis[/block]

Личные сообщения (ls)[block="ls"]Личные сообщения, ls[/block]

Вход (login)[block="login"]Вход, login[/block]

Подписки (subsc)[block="subsc"]Подписки, subsc[/block]

Поиск (search)[block="search"]Поиск, search[/block]

Цитирование (quotes)[block="quotes"]Цитирование, quotes[/block]

Пагинация (pagin)[block="pagin"]Пагинация, pagin[/block]

Опросы (polls)[block="polls"]Опросы, polls[/block]

Смайлы (smiles)[block="smiles"]Смайлы, smiles[/block]

Фикс скриптов QuadroBoards (qbfix)[block="qbfix"]Фикс скриптов QuadroBoards, qbfix[/block]

Страница форума:

На всех страницах (allpages)[block="allpages"]На всех страницах, allpages[/block]

Страницы (созд. в админке) (fpages)[block="fpages"]Страницы (соз. в админке), fpages[/block]

Главная страница (mainpage)[block="mainpage"]Главная страница, mainpage[/block]

Объявление (announ)[block="announ"]Объявление, announ[/block]

Категории (categ)[block="categ"]Категории, categ[/block]

Форумы (forums)[block="forums"]Форумы, forums[/block]

Статистика (stats)[block="stats"]Статистика, stats[/block]

Список тем (topiclist)[block="topiclist"]Список тем, topiclist[/block]

Страница профиля (profpage)[block="profpage"]Страница профиля, profpage[/block]

Тема (topics)[block="topics"]Тема, topics[/block]

Сообщения (posts)[block="posts"]Сообщения, posts[/block]

Контент сообщений (p-content)[block="p-content"]Контент сообщений, p-content[/block]

Рейтинг постов (p-repa)[block="p-repa"]Рейтинг постов, p-repa[/block]

Профиль автора поста (p-prof)[block="p-prof"]Профиль автора поста, p-prof[/block]

Форма ответа (fo)[block="fo"]Форма ответа, fo[/block]

Модификация ФО (fomod)[block="fomod"]Модификация ФО, fomod[/block]

Новые BB-теги (newbb)[block="newbb"]Новые BB-теги, newbb[/block]

Инструментарий спец тем/постов (spesh)[block="spesh"]Инструментарий спец тем/постов, spesh[/block]

Универсальные теги:

Дизайн/стиль (dis)[block="dis"]Дизайн/стиль, dis[/block]

Замена элементов/атрибутов (chan)[block="chan"]Замена элементов/атрибутов, chan[/block]

Загрузка (load)[block="load"]Загрузка, load[/block]

Переадресация (redir)[block="redir"]Переадресация, redir[/block]

Скроллинг (scroll)[block="scroll"]Скроллинг, scroll[/block]

Виджеты (vidjet)[block="vidjet"]Виджеты, vidjet[/block]

Меню (menu)[block="menu"]Меню, menu[/block]

Вкладки (ttabs)[block="ttabs"]Вкладки, ttabs[/block]

Галереи (gall)[block="gall"]Галереи, gall[/block]

Слайдеры (sliders)[block="sliders"]Слайдеры, sliders[/block]

Ротаторы (rotat)[block="rotat"]Ротаторы, rotat[/block]

Таймеры/даты (timers)[block="timers"]Таймеры/даты, timers[/block]

Спойлеры (spoilers)[block="spoilers"]Спойлеры, spoilers[/block]

Реклама (adv)[block="adv"]Реклама, adv[/block]

Изображения (pics)[block="pics"]Изображения, pics[/block]

Медиа (media)[block="media"]Медиа, media[/block]

Ролевые игры (frpg)[block="frpg"]Ролевые игры, frpg[/block]

Hover-эффекты (hover)[block="hover"]Hover-эффекты, hover[/block]

Анимация (anim)[block="anim"]Анимация, anim[/block]

Украшения (decor)[block="decor"]Украшения, decor[/block]

Праздники (seleb)[block="seleb"]Праздники, seleb[/block]

Ограничения/запреты (stops)[block="stops"]Ограничения/запреты, stops[/block]

Антикопирование (nocopy)[block="nocopy"]Антикопирование, nocopy[/block]

Уведомления (notif)[block="notif"]Уведомления, notif[/block]

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

🎧 Подкаст «НЕТЕРОЛЕВЫЕ»

🍁 Что такое осень? Конкурс осенних дизайнов!

🔥 Акция! Осенние скидки на Мгновенные уведомления

❤️ Поддержи проект! Стань модератором!

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

Эксперименты Will O The Wisp

Сообщений 171 страница 180 из 203

Поделиться17103.03.23 12:29

Поделиться17209.03.23 12:30

Поделиться17314.03.23 10:23

Поделиться17414.03.23 13:46

Поделиться17514.03.23 14:10

Поделиться17622.03.23 09:46

Поделиться17726.04.23 13:28

Поделиться17817.05.23 08:31

Поделиться17914.07.23 09:56

Поделиться18021.12.23 18:39

Быстрый ответ

Теги оформления специальных постов

Теги оформления картинок

Теги оформления контента